@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/src/components/popover/Popover.vue

@@ -1,173 +1,194 @@
-<template>
-  <div
-    class="inline-block relative xpopover"
-    :class="[
-      { 'hover': hover,
-        'is-open': isOpen,
-      },
-      $attrs.class,
-      $attrs.staticClass,
-    ]"
-  >
-    <div class="flex" @click="!hover ? toggle() : null">
-      <slot></slot>
-    </div>
+<script lang="ts">
+import { computed, defineComponent, ref, useCssModule, watch, type PropType } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 
-    <div
-      v-if="!hover"
-      class="fixed inset-0 opacity-0 z-40"
-      :class="[isOpen ? 'visible' : 'invisible']"
-      @click.self="close()"
-    ></div>
-
-    <div
-      class="absolute w-fit bottom-0 left-0 right-0 sm:p-0 transform transition-transform z-50 xpopover-content whitespace-nowrap max-w-xs"
-      :class="[
-        {
-          // align-left
-          'left-0 right-auto': align === 'left' && ['bottom', 'top'].includes(position),
-          // align-center
-          'left-1/2 right-auto -translate-x-1/2': align === 'center' && ['bottom', 'top'].includes(position),
-          // align-right
-          'right-0 left-auto': align === 'right' && ['bottom', 'top'].includes(position),
-          // align-top
-          'top-0 bottom-auto': align === 'top' && ['left', 'right'].includes(position),
-          // align-middle
-          '-translate-y-1/2 top-1/2 bottom-auto': align === 'center' && ['left', 'right'].includes(position),
-          // align-bottom
-          'bottom-0': align === 'bottom' && ['left', 'right'].includes(position),
-
-          // position-top
-          'xpopover-top bottom-full pb-2': position === 'top',
-          // position-right
-          'xpopover-right left-full pl-2': position === 'right',
-          // position-bottom
-          'xpopover-bottom top-full bottom-0': position === 'bottom',
-          // position-left
-          'xpopover-left right-full left-auto pr-2': position === 'left',
-        }
-      ]"
-      @click="dismissible ? close() : null"
-    >
-      <slot name="content"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-const validator = {
-  align: [
-    'bottom',
-    'center',
-    'left',
-    'right',
-    'top',
-  ],
-  position: [
-    'bottom',
-    'left',
-    'right',
-    'top',
-  ],
+const validators = {
+  align: ['bottom','center','left','right','top'],
+  position: ['bottom','left','right','top'],
 }
 
-export default {
+export default defineComponent({
   name: 'XPopover',
 
-  validator,
+  validators,
 
   props: {
     align: {
-      type: String,
+      type: String as PropType<'bottom' | 'center' | 'left' | 'right' | 'top'>,
       default: 'center',
-      validator: (value) => validator.align.includes(value),
+      validator: (value: string) => validators.align.includes(value),
     },
-
-    hover: {
-      type: Boolean,
-      default: false,
+    position: {
+      type: String as PropType<'bottom' | 'left' | 'right' | 'top'>,
+      default: 'bottom',
+      validator: (value: string) => validators.position.includes(value),
     },
-
-    dismissible: {
+    dismissOnClick: {
       type: Boolean,
       default: true,
     },
-
-    position: {
-      default: 'bottom',
-      type: String,
-      validator: (value) => validator.position.includes(value),
-    },
+    disabled: Boolean,
+    hover: Boolean,
+    block: Boolean,
   },
 
-  data() {
-    return {
-      isOpen: false,
+  emits: ['open', 'close', 'toggle'],
+
+  expose: ['open', 'close', 'toggle', 'isOpen'],
+
+  setup(props, { emit }) {
+    const elRef = ref<HTMLElement>()
+    const isOpen = ref(false)
+
+    let stopClickOutside: undefined | (()=> void) = undefined
+
+    watch(isOpen, (newValue, oldValue) => {
+      if (props.hover) return
+
+      if (stopClickOutside) {
+        stopClickOutside()
+        stopClickOutside = undefined
+      }
+
+      if (newValue) {
+        setTimeout(() => {
+          stopClickOutside = onClickOutside(elRef, close)
+        })
+      }
+    })
+
+    const $style = useCssModule()
+    const classes = computed(() => {
+      const c = []
+
+      c.push({
+        // align-left
+        'left-0 right-auto': props.align === 'left' && ['bottom', 'top'].includes(props.position),
+        // align-center
+        'left-1/2 right-auto -translate-x-1/2': props.align === 'center' && ['bottom', 'top'].includes(props.position),
+        // align-right
+        'right-0 left-auto': props.align === 'right' && ['bottom', 'top'].includes(props.position),
+        // align-top
+        'top-0 bottom-auto': props.align === 'top' && ['left', 'right'].includes(props.position),
+        // align-middle
+        '-translate-y-1/2 top-1/2 bottom-auto': props.align === 'center' && ['left', 'right'].includes(props.position),
+        // align-bottom
+        'bottom-0': props.align === 'bottom' && ['left', 'right'].includes(props.position),
+      })
+
+      if (props.position === 'top') c.push(`bottom-full pb-2 ${$style.popoverTop}`)
+      if (props.position === 'right') c.push(`left-full pl-2 ${$style.popoverRight}`)
+      if (props.position === 'bottom') c.push(`top-full bottom-0 ${$style.popoverBottom}`)
+      if (props.position === 'left') c.push(`right-full left-auto pr-2 ${$style.popoverLeft}`)
+
+      if (props.block) c.push('min-w-full')
+
+      return c
+    })
+
+    function close() {
+      if (props.disabled) return
+      isOpen.value = false
+      emit('close')
     }
-  },
 
-  methods: {
-    close() {
-      this.isOpen = false
-      this.$emit('close')
-    },
+    function open() {
+      if (props.disabled) return
+      isOpen.value = true
+      emit('open')
+    }
 
-    open() {
-      this.isOpen = true
-      this.$emit('open')
-    },
+    function toggle() {
+      if (props.disabled) return
+      isOpen.value = !isOpen.value
+      emit('toggle', isOpen.value)
+    }
 
-    toggle() {
-      this.isOpen = !this.isOpen
-      this.$emit('toggle', this.isOpen)
-    },
+    return {
+      elRef,
+      isOpen,
+      classes,
+      close,
+      open,
+      toggle,
+    }
   },
-}
+})
 </script>
 
-<style lang="css">
-.xpopover-content {
-  visibility: hidden;
-  transition-duration: .1s;
-  transition-timing-function: cubic-bezier(.4,0,1,1);
-}
-.xpopover-top {
-  --tw-translate-y: 0.5rem;
-}
-.xpopover-right {
-  --tw-translate-x: -0.5rem;
-}
-.xpopover-bottom {
-  --tw-translate-y: -0.25rem;
-}
-.xpopover-left {
-  --tw-translate-x: 0.5rem;
-}
-
-.xpopover.hover:hover .xpopover-content,
-.xpopover.is-open .xpopover-content {
-  visibility: visible;
-  transition-duration: .15s;
-  transition-timing-function: cubic-bezier(0,0,.2,1);
-}
-
-.xpopover.hover:hover .xpopover-top,
-.xpopover.is-open .xpopover-top {
-  --tw-translate-y: 0.25rem;
-}
-
-.xpopover.hover:hover .xpopover-right,
-.xpopover.is-open .xpopover-right {
-  --tw-translate-x: 0px;
-}
+<template>
+  <div
+    ref="elRef"
+    class="inline-block relative"
+    :class="[
+      $style.popover,
+      [hover ? $style.hover : ''],
+      [isOpen ? $style['is-open'] : ''],
+      { 'w-full': block }
+    ]"
+  >
+    <div class="flex" @click="!hover ? toggle() : null">
+      <slot></slot>
+    </div>
 
-.xpopover.hover:hover .xpopover-bottom,
-.xpopover.is-open .xpopover-bottom {
-  --tw-translate-y: 0.25rem;
-}
+    <div
+      class="absolute w-fit bottom-0 left-0 right-0 sm:p-0 transform transition-transform z-40 max-w-xs"
+      :class="[
+        $style.popoverContent,
+        classes
+      ]"
+      @click="dismissOnClick ? close() : null"
+    >
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
 
-.xpopover.hover:hover .xpopover-left,
-.xpopover.is-open .xpopover-left {
-  --tw-translate-x: 0px;
+<style lang="postcss" module>
+.popover {
+  .popoverContent {
+    visibility: hidden;
+    transition-duration: .1s;
+    transition-timing-function: cubic-bezier(.4,0,1,1);
+  }
+  .popoverTop {
+    --tw-translate-y: 0.5rem;
+  }
+  .popoverRight {
+    --tw-translate-x: -0.5rem;
+  }
+  .popoverBottom {
+    --tw-translate-y: -0.25rem;
+  }
+  .popoverLeft {
+    --tw-translate-x: 0.5rem;
+  }
+
+  &.hover:hover .popoverContent,
+  &.is-open .popoverContent {
+    visibility: visible;
+    transition-duration: .15s;
+    transition-timing-function: cubic-bezier(0,0,.2,1);
+  }
+
+  &.hover:hover .popoverTop,
+  &.is-open .popoverTop {
+    --tw-translate-y: 0.25rem;
+  }
+
+  &.hover:hover .popoverRight,
+  &.is-open .popoverRight {
+    --tw-translate-x: 0px;
+  }
+
+  &.hover:hover .popoverBottom,
+  &.is-open .popoverBottom {
+    --tw-translate-y: 0.25rem;
+  }
+
+  &.hover:hover .popoverLeft,
+  &.is-open .popoverLeft {
+    --tw-translate-x: 0px;
+  }
 }
 </style>

package/src/components/popover/PopoverContainer.vue

@@ -1,14 +1,7 @@
-<template>
-  <component
-    :is="tag"
-    class="inline-block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border-t border border-gray-200 dark:border-gray-800"
-  >
-    <slot></slot>
-  </component>
-</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
 
-<script>
-export default {
+export default defineComponent({
   name: 'XPopoverContainer',
 
   props: {
@@ -17,12 +10,14 @@ export default {
       type: String,
     },
   },
-
-  created() {
-    if (this.$parent.$options.name !== 'XPopover') {
-      this.$destroy()
-      throw new Error('PopoverContainer must be wrap with Popover')
-    }
-  },
-}
+})
 </script>
+
+<template>
+  <component
+    :is="tag"
+    class="block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800"
+  >
+    <slot></slot>
+  </component>
+</template>

package/src/components/progress/Progress.vue

@@ -1,120 +1,86 @@
-<template>
-  <component :is="tag" class="w-full">
-    <div
-      v-if="variant === 'bar'"
-      class="rounded-lg bg-gray-200 dark:bg-gray-700 overflow-hidden"
-    >
-      <div
-        class="h-2 rounded-lg transition-all duration-200"
-        :class="[`bg-${color}-500`]"
-        :style="{
-          width: `${percentage}%`,
-        }"
-      ></div>
-    </div>
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useColors } from '../../composables/colors'
 
-    <svg
-      v-if="variant === 'circle'"
-      class="transform -rotate-90"
-      viewBox="0 0 100 100"
-    >
-      <circle
-        class="text-gray-200 dark:text-gray-700"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        stroke-width="4"
-        fill="none"
-        cx="50"
-        cy="50"
-        r="40"
-      />
-      <circle
-        class="transition-all duration-200"
-        :class="[`text-${color}-500`]"
-        :style="{ strokeDasharray: `${circleProgress} 252` }"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        stroke-width="4"
-        fill="none"
-        cx="50"
-        cy="50"
-        r="40"
-      />
-    </svg>
+// const validators = {
+//   variant: ['bar','score'],
+// }
 
-    <div
-      v-if="variant === 'score'"
-      class="space-x-1 inline-block"
-    >
-      <div
-        v-for="index in scoreLength"
-        :key="index"
-        class="rounded-sm h-2 w-3 inline-block"
-        :class="isScoreActive(index) ? [`bg-${color}-500`]: ['bg-gray-200 dark:bg-gray-700']"
-      ></div>
-    </div>
-  </component>
-</template>
-
-<script>
-const validator = {
-  variant: [
-    'bar',
-    'circle',
-    'score',
-  ],
-}
-
-export default {
+export default defineComponent({
   name: 'XProgress',
 
-  validator,
+  // validators,
 
   props: {
-    color: {
-      type: String,
-      default: 'primary',
-    },
-
+    ...useColors.props('primary'),
     percentage: {
       type: Number,
       default: 0,
-      validator: (val) => val >= 0 && val <= 100,
-    },
-
-    scoreLength: {
-      type: Number,
-      default: 3,
-    },
-
-    tag: {
-      type: String,
-      default: 'div',
+      validator: (value: number) => value >= 0 && value <= 100,
     },
-
-    variant: {
-      type: String,
-      default: 'bar',
-      validator: (value) => validator.variant.includes(value),
+    // variant: {
+    //   type: String as PropType<'bar' | 'score'>,
+    //   default: 'bar',
+    //   validator: (value: string) => validators.variant.includes(value),
+    // },
+    gradient: Boolean,
+    animate: {
+      type: Boolean,
+      default: true,
     },
+    thick: Boolean,
   },
 
-  computed: {
-    circleProgress() {
-      const progressLimit = 251
+  setup(props) {
+    const css = useCSS('progress')
+    const colors = useColors()
+    const style = computed(() => {
+      const color = colors.getPalette(props.color)
+      const vars = []
 
-      return (progressLimit / 100) * this.percentage
-    },
-  },
+      vars.push(css.variables({
+        bg: color[500],
+      }))
 
-  methods: {
-    isScoreActive(item) {
-      if (this.percentage > (item - 1) * (100 / this.scoreLength)) return true
+      if (props.gradient) vars.push({
+        '--tw-gradient-stops': `${color[100]}, ${color[800]}`,
+      })
 
-      return false
-    },
+      return vars
+    })
+
+    return {
+      style,
+    }
   },
-}
+})
 </script>
+
+<template>
+  <div
+    class="relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none"
+    :class="[thick ? 'h-1.5' : 'h-1']"
+    :style="style"
+  >
+    <div
+      class="h-full"
+      :class="[
+        gradient ? 'bg-gradient-to-r' : 'bg-[color:var(--x-progress-bg)]',
+        {
+          'duration-150 transition-[width]': animate
+        }
+      ]"
+      :style="[!gradient ? {width: `${percentage}%`} : '']"
+    >
+    </div>
+    <div
+      v-if="gradient"
+      class="absolute h-full bg-gray-100 dark:bg-gray-700 right-0 top-0"
+      :class="{ 'duration-150 transition-[width]': animate }"
+      :style="{
+        width: `${100 - percentage}%`
+      }"
+    ></div>
+  </div>
+</template>