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

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,56 @@
+<script lang="ts">
+import { computed, defineComponent, inject } 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'
+    })
+
+    return {
+      icons,
+      sizeClasses,
+    }
+  },
+})
+</script>
+
+<template>
+  <svg
+    :class="[sizeClasses, { 'stroke-2': !filled}]"
+    :fill="filled ? 'currentColor' : 'none'"
+    :stroke="filled ? undefined : 'currentColor'"
+    :viewBox="viewBox"
+    :stroke-linecap="filled ? undefined : 'round'"
+    :stroke-linejoin="filled ? undefined : 'round'"
+    xmlns="http://www.w3.org/2000/svg"
+    v-html="icons[icon] ? icons[icon] : icon"
+  />
+</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,198 @@
+<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)
+      const value = Number(target.value)
+
+      if (props.type === 'number') {
+        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>

package/src/components/menu/Menu.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+
+import XMenuItem from './MenuItem.vue'
+import XCollapse from '../../components/collapse/Collapse.vue'
+import XDivider from '../../components/divider/Divider.vue'
+
+export default defineComponent({
+  name: 'XMenu',
+
+  components: {
+    XDivider,
+    XCollapse,
+    XMenuItem,
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    items: Array as PropType<Array<any>>,
+    collapsible: {
+      type: Boolean,
+      default: true,
+    },
+    collapseIcon: String,
+    expanded: Boolean,
+    disabled: Boolean,
+    rounded: Boolean,
+    filled: Boolean,
+  },
+
+  emits: ['expand'],
+})
+</script>
+
+<template>
+  <div v-if="items">
+    <template v-for="(item, index) in items" :key="index">
+      <template v-if="item.items">
+        <x-collapse
+          v-if="item.collapsible !== false"
+          :icon="item.collapseIcon || collapseIcon"
+          :expanded="item.expanded || expanded"
+          :disabled="disabled || item.disabled"
+          class="x-menu-inner"
+          @expand="$emit('expand')"
+        >
+          <template #default="{ }">
+            <x-menu-item
+              :item="item"
+              :color="item.color || color"
+              :size="item.size || size"
+              :rounded="rounded"
+              :filled="filled"
+              :disabled="disabled || item.disabled"
+              class="pr-10 font-medium"
+            />
+          </template>
+          <template #content="{ expand }">
+            <x-menu
+              class="border-l ml-4 border-gray-100 dark:border-gray-700 mt-2 mb-1"
+              :class="{ 'pl-1': filled }"
+              :items="item.items"
+              :color="item.color || color"
+              :size="item.size || size"
+              :collapsible="collapsible"
+              :collapse-icon="item.collapseIcon || collapseIcon"
+              :expanded="item.expanded || expanded"
+              :disabled="disabled || item.disabled"
+              :rounded="rounded"
+              :filled="filled"
+              @expand="expand(false)"
+            />
+          </template>
+        </x-collapse>
+        <template v-else>
+          <x-menu-item
+            :item="item"
+            :rounded="rounded"
+            :color="item.color || color"
+            :size="item.size || size"
+            :disabled="disabled || item.disabled"
+            class="font-medium"
+            inactive
+          />
+          <x-menu
+            class="x-menu-inner ml-4 border-l border-gray-100 dark:border-gray-700"
+            :class="{ 'pl-1': filled }"
+            :items="item.items"
+            :color="item.color || color"
+            :size="item.size || size"
+            :collapsible="collapsible"
+            :collapse-icon="item.collapseIcon || collapseIcon"
+            :expanded="item.expanded || expanded"
+            :disabled="disabled || item.disabled"
+            :rounded="rounded"
+            :filled="filled"
+            @expand="$emit('expand')"
+          />
+        </template>
+      </template>
+      <component
+        :is="item.divider ? 'x-divider' : 'x-menu-item'"
+        v-else
+        :color="item.color || color"
+        :size="item.size || size"
+        :item="item"
+        :disabled="disabled || item.disabled"
+        :filled="filled"
+        :rounded="rounded"
+        :class="{ 'my-2': item.divider }"
+        @active="$emit('expand')"
+      />
+    </template>
+  </div>
+</template>