@indielayer/ui 1.0.0-alpha.0 → 1.0.0-alpha.5

package/src/components/form/Form.vue

@@ -0,0 +1,111 @@
+<script lang="ts">
+import { defineComponent, provide, onMounted, watch, nextTick } from 'vue'
+import { injectFormKey } from '../../composables/keys'
+
+export type Form = {
+  name: string,
+  focus: ()=> void,
+  validate: ()=> boolean,
+  setError: (val: string)=> void,
+}
+
+export default defineComponent({
+  name: 'XForm',
+
+  inheritAttrs: false,
+
+  props: {
+    autoValidate: {
+      type: Boolean,
+      default: true,
+    },
+    autoFocus: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: Boolean,
+    errors: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  emits: ['submit'],
+
+  setup(props, { emit }) {
+    const inputs: Form[] = []
+
+    provide(injectFormKey, {
+      registerInput: (name: string, focus: ()=> void, validate: ()=> boolean, setError: (val: string)=> void) => {
+        const exists = inputs.find((i) => i.name === name)
+
+        if (exists) {
+          exists.focus = focus
+          exists.validate = validate
+          exists.setError = setError
+        }
+        else inputs.push({ name, focus, validate, setError })
+      },
+      unregisterInput: (name: string) => {
+        const index = inputs.findIndex((i) => i.name === name)
+
+        inputs.splice(index, 1)
+      },
+      isInsideForm: true,
+    })
+
+    onMounted(() => {
+      if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus()
+    })
+
+    watch(() => props.errors, (errors) => {
+      nextTick(() => {
+        errors.forEach((error: any) => {
+          const input = inputs.find((i) => i.name === error.field)
+
+          if (input) input.setError(error.msg)
+        })
+      })
+    })
+
+    const validate = () => {
+      let isFormValid = true
+
+      inputs.forEach((input) => {
+        const isInputValid = input.validate()
+
+        if (!isInputValid && isFormValid) {
+          isFormValid = false
+
+          // focus on input error
+          if (input.focus) input.focus()
+        }
+      })
+
+      return isFormValid
+    }
+
+    const submit = (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      const isFormValid = props.autoValidate ? validate() : true
+
+      emit('submit', isFormValid)
+    }
+
+    return {
+      validate,
+      submit,
+    }
+  },
+})
+</script>
+
+<template>
+  <form @submit="submit">
+    <fieldset :disabled="disabled">
+      <slot></slot>
+    </fieldset>
+  </form>
+</template>

package/src/components/icon/Icon.vue

@@ -0,0 +1,123 @@
+<script lang="ts">
+import { computed, defineComponent, inject, ref, watchEffect } from 'vue'
+import { useCommon } from '../../composables/common'
+import { injectIconsKey } from '../../composables/keys'
+
+export default defineComponent({
+  name: 'XIcon',
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    icon: {
+      type: String,
+      required: true,
+    },
+    filled: Boolean,
+    viewBox: {
+      type: String,
+      default: '0 0 24 24',
+    },
+  },
+
+  setup(props) {
+    const icons: any = inject(injectIconsKey, {})
+    const sizeClasses = computed(() => {
+      if (props.size === 'xs') return 'h-3 w-3'
+      else if (props.size === 'sm') return 'h-4 w-4'
+      else if (props.size === 'lg') return 'h-6 w-6'
+      else if (props.size === 'xl') return 'h-9 w-9'
+
+      return 'h-5 w-5'
+    })
+
+    const isWrapSVG = ref(false)
+    const computedIcon = ref('')
+    const computedFilled = ref(props.filled)
+    const computedViewBox = ref(props.viewBox)
+    const attrs = ref({})
+
+    watchEffect(() => {
+      const injectedIcon = icons[props.icon]
+
+      isWrapSVG.value = false
+      computedIcon.value = injectedIcon
+
+      if (injectedIcon) {
+        if (typeof injectedIcon === 'string') {
+          if (injectedIcon.startsWith('<svg')) {
+            isWrapSVG.value = true
+
+            const { content, attributes } = getSVG(injectedIcon)
+
+            attrs.value = attributes
+            computedIcon.value = content
+          } else {
+            isWrapSVG.value = false
+            computedIcon.value = injectedIcon
+          }
+        } else if (typeof injectedIcon === 'object') {
+          computedIcon.value = injectedIcon.icon
+          computedFilled.value = injectedIcon.filled || props.filled
+          computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox
+        }
+      } else {
+        computedIcon.value = props.icon
+      }
+    })
+
+    function getSVG(svgString: string) {
+      const temp = document.createElement('template')
+
+      temp.innerHTML = svgString.trim()
+
+      const [svg] = temp.content.children
+      const names = svg.getAttributeNames()
+      const attributes: Record<string, string | null> = {}
+
+      names.forEach((n) => {
+        if (!['height', 'width', 'class'].includes(n)) attributes[n] = svg.getAttribute(n)
+      })
+
+      return {
+        attributes,
+        content: svg.innerHTML,
+      }
+    }
+
+    return {
+      attrs,
+      isWrapSVG,
+      computedIcon,
+      computedFilled,
+      computedViewBox,
+      sizeClasses,
+    }
+  },
+})
+</script>
+
+<template>
+  <svg
+    v-if="isWrapSVG"
+    class="inline"
+    :class="sizeClasses"
+    v-bind="attrs"
+    v-html="computedIcon"
+  />
+  <svg
+    v-else
+    xmlns="http://www.w3.org/2000/svg"
+    class="inline"
+    :class="[sizeClasses, { 'stroke-2': !computedFilled}]"
+    :stroke-linejoin="computedFilled ? undefined : 'round'"
+    :stroke-linecap="computedFilled ? undefined : 'round'"
+    :stroke="computedFilled ? undefined : 'currentColor'"
+    :fill="computedFilled ? 'currentColor' : 'none'"
+    :viewBox="computedViewBox"
+    v-html="computedIcon"
+  />
+</template>

package/src/components/image/Image.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { defineComponent, watch, ref } from 'vue'
+
+const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
+
+export default defineComponent({
+  name: 'XImage',
+
+  props: {
+    src: String,
+  },
+
+  setup(props) {
+    const source = ref<string | undefined>(fallback)
+
+    watch(() => props.src, (src) => {
+      if (!src) return
+      const img = new Image()
+
+      img.onload = () => { source.value = props.src }
+      img.onerror = () => { }
+      img.src = src
+    }, {
+      immediate: true,
+    })
+
+    return {
+      source,
+    }
+  },
+})
+</script>
+
+<template>
+  <img :src="source" />
+</template>

package/src/components/index.ts

@@ -0,0 +1,45 @@
+export { default as XAlert } from './alert/Alert.vue'
+export { default as XAvatar } from './avatar/Avatar.vue'
+export { default as XBadge } from './badge/Badge.vue'
+export { default as XBreadcrumbs } from './breadcrumbs/Breadcrumbs.vue'
+export { default as XButton } from './button/Button.vue'
+export { default as XButtonGroup } from './button/ButtonGroup.vue'
+export { default as XCard } from './card/Card.vue'
+export { default as XCheckbox } from './checkbox/Checkbox.vue'
+export { default as XCollapse } from './collapse/Collapse.vue'
+export { default as XContainer } from './container/Container.vue'
+export { default as XDivider } from './divider/Divider.vue'
+export { default as XDrawer } from './drawer/Drawer.vue'
+export { default as XForm } from './form/Form.vue'
+export { default as XIcon } from './icon/Icon.vue'
+export { default as XImage } from './image/Image.vue'
+export { default as XInput } from './input/Input.vue'
+export { default as XLink } from './link/Link.vue'
+export { default as XMenu } from './menu/Menu.vue'
+export { default as XMenuItem } from './menu/MenuItem.vue'
+export { default as XModal } from './modal/Modal.vue'
+export { default as XNotifications } from './notifications/Notifications.vue'
+export { default as XPagination } from './pagination/Pagination.vue'
+export { default as XPaginationItem } from './pagination/PaginationItem.vue'
+export { default as XPopover } from './popover/Popover.vue'
+export { default as XPopoverContainer } from './popover/PopoverContainer.vue'
+export { default as XProgress } from './progress/Progress.vue'
+export { default as XRadio } from './radio/Radio.vue'
+export { default as XScroll } from './scroll/Scroll.vue'
+export { default as XSelect } from './select/Select.vue'
+export { default as XSkeleton } from './skeleton/Skeleton.vue'
+export { default as XSlider } from './slider/Slider.vue'
+export { default as XSpacer } from './spacer/Spacer.vue'
+export { default as XSpinner } from './spinner/Spinner.vue'
+export { default as XTable } from './table/Table.vue'
+export { default as XTableBody } from './table/TableBody.vue'
+export { default as XTableCell } from './table/TableCell.vue'
+export { default as XTableHead } from './table/TableHead.vue'
+export { default as XTableHeader } from './table/TableHeader.vue'
+export { default as XTableRow } from './table/TableRow.vue'
+export { default as XTab } from './tab/Tab.vue'
+export { default as XTabGroup } from './tab/TabGroup.vue'
+export { default as XTag } from './tag/Tag.vue'
+export { default as XTextarea } from './textarea/Textarea.vue'
+export { default as XToggle } from './toggle/Toggle.vue'
+export { default as XTooltip } from './tooltip/Tooltip.vue'

package/src/components/input/Input.vue

@@ -0,0 +1,199 @@
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useColors } from '../../composables/colors'
+import { useCommon } from '../../composables/common'
+import { useInputtable } from '../../composables/inputtable'
+import { useInteractive } from '../../composables/interactive'
+
+export default defineComponent({
+  name: 'XInput',
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useInteractive.props(),
+    ...useInputtable.props(),
+    showPasswordToggle: {
+      type: Boolean,
+      default: true,
+    },
+    helper: String,
+    label: String,
+    dir: {
+      type: String,
+      default: 'ltr',
+    },
+    icon: String,
+    iconRight: String,
+    max: Number,
+    maxlength: Number,
+    min: Number,
+    minlength: Number,
+    placeholder: String,
+    type: {
+      type: String,
+      default: 'text',
+    },
+    inputClass: String,
+  },
+
+  emits: useInputtable.emits(),
+
+  setup(props, { emit }) {
+    const elRef = ref<HTMLInputElement>()
+    const currentType = ref(props.type)
+
+    const labelClasses = computed(() => {
+      if (props.size === 'xs') return 'text-xs'
+      else if (props.size === 'sm') return 'text-sm'
+      else if (props.size === 'lg') return 'text-lg'
+      else if (props.size === 'xl') return 'text-xl'
+
+      return ''
+    })
+
+    const sizeClasses = computed(() => {
+      if (props.size === 'xs') return 'px-2 py-1 text-xs'
+      else if (props.size === 'sm') return 'px-2 py-2 text-sm'
+      else if (props.size === 'lg') return 'px-4 py-3 text-lg'
+      else if (props.size === 'xl') return 'px-5 py-4 text-xl'
+
+      return 'px-3 py-2'
+    })
+
+    const css = useCSS('input')
+    const colors = useColors()
+    const color = colors.getPalette('primary')
+    const style = css.get('border', color[500])
+
+    function onChange(e: Event) {
+      if (!e.target) return
+
+      const target = (e.target as HTMLInputElement)
+
+      if (props.type === 'number') {
+        const value = Number(target.value)
+
+        if (typeof props.min !== 'undefined') {
+          if (value < props.min) target.value = props.min.toString()
+        }
+
+        if (typeof props.max !== 'undefined') {
+          if (value > props.max) target.value = props.max.toString()
+        }
+      }
+    }
+
+    function togglePasswordVisibility() {
+      currentType.value = currentType.value === 'password' ? 'text' : 'password'
+    }
+
+    const interactive = useInteractive(elRef)
+
+    return {
+      ...interactive,
+      ...useInputtable(props, { focus: interactive.focus, emit }),
+      currentType,
+      labelClasses,
+      sizeClasses,
+      style,
+      elRef,
+      onChange,
+      togglePasswordVisibility,
+    }
+  },
+})
+</script>
+
+<template>
+  <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"
+      :class="labelClasses"
+      v-text="label"
+    ></p>
+
+    <div class="relative">
+      <x-icon
+        v-if="icon"
+        :size="size"
+        :icon="icon"
+        class="text-gray-600 dark:text-gray-300 absolute ml-2 left-0 my-auto inset-y-0"
+      />
+
+      <input
+        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 hover:border-gray-400 dark:border-gray-700 border shadow-sm rounded-md
+        focus:border-[color:var(--x-input-border)]
+        "
+        :style="style"
+        :class="[
+          sizeClasses,
+          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',
+          type === 'password' ? 'pr-9' : '',
+          {
+            '!pl-9': icon,
+            '!pr-9': iconRight,
+            // error
+            'border-red-500 focus:border-red-500 dark:focus:border-red-500': errorInternal,
+          },
+          inputClass,
+        ]"
+        :disabled="disabled"
+        :min="min"
+        :max="max"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        :dir="dir"
+        :name="name"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :type="currentType"
+        :value="modelValue"
+        v-bind="$attrs"
+        v-on="inputListeners"
+        @change="onChange"
+      />
+
+      <x-icon
+        v-if="iconRight"
+        :size="size"
+        :icon="iconRight"
+        class="text-gray-600 dark:text-gray-300 absolute mr-2 right-0 my-auto inset-y-0"
+      />
+
+      <svg
+        v-else-if="type === 'password' && showPasswordToggle"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill="none"
+        class="text-gray-600 dark:text-gray-300 stroke-2 w-5 h-5 absolute my-auto mr-2 inset-y-0 right-1 cursor-pointer"
+        @click="togglePasswordVisibility()"
+      >
+        <template v-if="currentType === 'password'">
+          <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+        </template>
+
+        <template v-else>
+          <path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+        </template>
+      </svg>
+    </div>
+
+    <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>

package/src/components/link/Link.vue

@@ -0,0 +1,110 @@
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { useColors } from '../../composables/colors'
+import { useCSS } from '../../composables/css'
+
+export default defineComponent({
+  name: 'XLink',
+
+  props: {
+    ...useColors.props(),
+    tag: {
+      type: String,
+      default: 'a',
+    },
+    to: [String, Object],
+    shadow: Boolean,
+    external: Boolean,
+    underline: Boolean,
+  },
+
+  setup(props) {
+    const css = useCSS()
+    const colors = useColors()
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color || 'gray')
+
+      return css.variables({
+        text: props.color ? color[500] : '',
+        hover: {
+          text: !props.shadow ? color[600] : '',
+        },
+        shadow: color[100],
+        dark: {
+          text: props.color ? color[400] : '',
+          hover: {
+            text: color[300],
+          },
+          shadow: color[900],
+        },
+      })
+    })
+
+    return {
+      styles,
+    }
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="to ? 'router-link' : tag"
+    :to="to"
+    class="transition duration-300 ease-in-out cursor-pointer
+      text-[color:var(--x-text)]
+      dark:text-[color:var(--x-dark-text)]
+    "
+    :style="styles"
+    :class="[
+      [shadow ? $style['link--shadow'] : ''],
+      {
+        'underline': underline
+      },
+    ]"
+  >
+    <span
+      v-if="external"
+      class="inline-flex items-center"
+    >
+      <slot></slot>
+      <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-4 h-4 ml"
+      >
+        <line x1="7" y1="17" x2="17" y2="7" />
+        <polyline points="7 7 17 7 17 17" />
+      </svg>
+    </span>
+    <template v-else>
+      <slot></slot>
+    </template>
+  </component>
+</template>
+
+<style lang="postcss" module scoped>
+  .link {
+    &--shadow {
+      box-shadow: inset 0 -0.315em 0 0 var(--x-shadow);
+      &:hover {
+        box-shadow: inset 0 -1.125em 0 0 var(--x-shadow);
+      }
+    }
+
+    :global(.dark) & {
+      &--shadow {
+        box-shadow: inset 0 -0.315em 0 0 var(--x-dark-shadow);
+        &:hover {
+          box-shadow: inset 0 -1.125em 0 0 var(--x-dark-shadow);
+        }
+      }
+    }
+  }
+</style>