@indielayer/ui 0.1.0 → 0.2.2

package/src/composables/inputtable.js

@@ -0,0 +1,157 @@
+import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
+import {
+  withValidator as withInteractiveValidator,
+  withProps as withInteractiveProps,
+  useInteractive,
+} from './interactive'
+
+const validator = {
+  ...withInteractiveValidator(),
+}
+
+export const withProps = () => ({
+  ...withInteractiveProps(),
+  name: {
+    type: String,
+    default: null,
+  },
+  modelValue: {
+    type: [String, Number, Boolean, Function, Object, Array],
+    default: null,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  validateOnInput: {
+    type: Boolean,
+    default: true,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+  rules: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+export const withValidator = () => validator
+
+export const withEmits = (useListeners = true) => {
+  const emits = ['update:modelValue']
+
+  if (!useListeners) return emits
+
+  return emits.concat(['blur', 'focus', 'input', 'change'])
+}
+
+export const useInputtable = (props, { attrs, emit, useListeners = true } = {}) => {
+  const interactive = useInteractive()
+
+  const isFirstValidation = ref(true)
+  const errorInternal = ref(props.error)
+
+  const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7)
+  const nameInternal = ref(name)
+
+  watch(() => props.error, (val) => { errorInternal.value = val })
+  watch(() => props.name, (val) => { if (val) nameInternal.value = val })
+
+  const form = inject('form', {
+    registerInput: () => {},
+    unregisterInput: () => {},
+  })
+
+  const reset = () => {
+    errorInternal.value = ''
+    isFirstValidation.value = true
+    emit('update:modelValue', '')
+  }
+
+  const setError = (val) => {
+    errorInternal.value = val
+  }
+
+  const validate = (val) => {
+    val = val || props.modelValue
+
+    isFirstValidation.value = false
+
+    for (let i = 0; i < props.rules.length; i++) {
+      const item = props.rules[i]
+
+      let isValid = true
+
+      // Direct Function
+      if (typeof item === 'function') {
+        const rule = item
+
+        isValid = rule(val)
+      } else if (Array.isArray(item) && item.length === 2) {
+        // Rule array [function, options]
+        const { 0: rule, 1: options } = item
+
+        isValid = rule(val, options)
+      } else {
+        // Rule object { fn, options }
+        const rule = item.fn
+        const { options } = item
+
+        isValid = rule(val, options)
+      }
+
+      if (isValid !== true) {
+        errorInternal.value = isValid
+
+        return false
+      }
+    }
+
+    errorInternal.value = ''
+
+    return true
+  }
+
+  const inputListeners = useListeners ? computed(() => {
+    return {
+      attrs,
+      blur: (event) => emit('blur', event),
+      focus: (event) => emit('focus', event),
+      input: (event) => {
+        if (props.validateOnInput && !isFirstValidation.value) validate(event.target.value)
+        emit('update:modelValue', event.target.value)
+      },
+      change: (event) => emit('change', event),
+    }
+  }) : ref({})
+
+  onMounted(() => {
+    form.registerInput(nameInternal.value, { focus: interactive.focus, validate, setError })
+  })
+
+  onUnmounted(() => {
+    form.unregisterInput(nameInternal.value)
+  })
+
+  return {
+    ...interactive,
+
+    // data
+    isFirstValidation,
+    errorInternal,
+
+    // computed
+    inputListeners,
+
+    // methods
+    reset,
+    validate,
+    setError,
+  }
+}

package/src/composables/interactive.js

@@ -0,0 +1,36 @@
+import { ref } from 'vue'
+import {
+  withValidator as withCommonValidator,
+  withProps as withCommonProps,
+} from './common'
+
+const validator = {
+  ...withCommonValidator(),
+}
+
+export const withProps = () => ({
+  ...withCommonProps(),
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+export const withValidator = () => validator
+
+export const useInteractive = () => {
+  const focusRef = ref(null)
+
+  const focus = () => {
+    if (focusRef.value) focusRef.value.focus()
+  }
+
+  return {
+    focusRef,
+    focus,
+  }
+}

package/src/index.js

@@ -0,0 +1,16 @@
+import * as components from './components'
+
+const install = (Vue, config = {}) => {
+  Object.entries(components).forEach(([name, component]) => {
+    const prefix = config.prefix ? config.prefix : 'X'
+
+    Vue.component(`${prefix}${name}`, component)
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default install
+export * from './components'

package/src/nuxt.js

@@ -0,0 +1,14 @@
+import { join } from 'pathe'
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  hooks: {
+    'components:dirs'(dirs) {
+      // Add ./components dir to the list
+      dirs.push({
+        path: join(__dirname, 'components'),
+        prefix: 'X',
+      })
+    },
+  },
+})

package/src/tailwind.preset.js

@@ -0,0 +1,24 @@
+const { borderRadius } = require('tailwindcss/defaultTheme')
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.blue,
+        secondary: colors.slate,
+        success: colors.green,
+        warning: colors.yellow,
+        error: colors.red,
+      },
+      borderRadius: {
+        button: borderRadius.md,
+        form: borderRadius.md,
+      },
+      backgroundImage: {
+        'dark-image': 'linear-gradient(rgba(0, 0, 0, 0.15) 0 0)',
+        'darker-image': 'linear-gradient(rgba(0, 0, 0, 0.30) 0 0)',
+      },
+    },
+  },
+}

package/lib/cjs/src/components/avatar/Avatar.vue.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var Avatar_vue_vue_type_script_lang = require('./Avatar.vue_vue&type=script&lang.js');
-var Avatar_vue_vue_type_template_id_36a4d50f_lang = require('./Avatar.vue_vue&type=template&id=36a4d50f&lang.js');
-
-Avatar_vue_vue_type_script_lang.render = Avatar_vue_vue_type_template_id_36a4d50f_lang.render;
-
-module.exports = Avatar_vue_vue_type_script_lang;

package/lib/cjs/src/components/avatar/Avatar.vue_vue&type=script&lang.js

@@ -1,76 +0,0 @@
-'use strict';
-
-const validator = {
-  color: [
-    'blue',
-    'gray',
-    'green',
-    'indigo',
-    'pink',
-    'primary',
-    'purple',
-    'red',
-    'yellow',
-  ],
-  variant: [
-    'rounded',
-    'squared',
-  ],
-};
-
-var script = {
-  name: 'XAvatar',
-
-  validator,
-
-  initials(name) {
-    if (name) {
-      const initials = name.match(/\b\w/g) || [];
-
-      return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
-    }
-
-    return ''
-  },
-
-  props: {
-    alt: {
-      default: null,
-      type: String,
-    },
-
-    color: {
-      default: 'primary',
-      type: String,
-      validator: (value) => validator.color.includes(value),
-    },
-
-    name: {
-      default: null,
-      type: String,
-    },
-
-    size: {
-      default: null,
-      type: String,
-    },
-
-    src: {
-      default: null,
-      type: String,
-    },
-
-    tag: {
-      default: 'span',
-      type: String,
-    },
-
-    variant: {
-      default: 'rounded',
-      type: String,
-      validator: (value) => validator.variant.includes(value),
-    },
-  },
-};
-
-module.exports = script;

package/lib/cjs/src/components/avatar/Avatar.vue_vue&type=template&id=36a4d50f&lang.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-const _hoisted_1 = {
-  key: 0,
-  class: "leading-none"
-};
-const _hoisted_2 = ["alt", "src"];
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$props.tag), vue.mergeProps(_ctx.$attrs, {
-    class: ["inline-flex items-center justify-center overflow-hidden", [
-      // color
-      !_ctx.$props.src ? {
-        'bg-blue-500 text-blue-50': _ctx.$props.color === 'blue',
-        'bg-gray-500 text-gray-50': _ctx.$props.color === 'gray',
-        'bg-green-500 text-green-50': _ctx.$props.color === 'green',
-        'bg-indigo-500 text-indigo-50': _ctx.$props.color === 'indigo',
-        'bg-pink-500 text-pink-50': _ctx.$props.color === 'pink',
-        'bg-primary-500 text-primary-50': _ctx.$props.color === 'primary',
-        'bg-purple-500 text-purple-50': _ctx.$props.color === 'purple',
-        'bg-red-500 text-red-50': _ctx.$props.color === 'red',
-        'bg-yellow-500 text-yellow-50': _ctx.$props.color === 'yellow',
-      } : {},
-      {
-        // size
-        'h-6 w-6 text-xs': _ctx.$props.size === 'xs',
-        'h-7 w-7 text-sm': _ctx.$props.size === 'sm',
-        'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes(_ctx.$props.size),
-        'h-12 w-12 text-lg': _ctx.$props.size === 'lg',
-        'h-20 w-20 text-2xl': _ctx.$props.size === 'xl',
-        'h-36 w-36 text-2xl': _ctx.$props.size === '2xl',
-
-        // variant
-        'rounded-full': _ctx.$props.variant === 'rounded',
-        'rounded-md': _ctx.$props.variant === 'squared',
-      },
-    ]]
-  }), {
-    default: vue.withCtx(() => [
-      (!_ctx.$props.src && _ctx.$props.name)
-        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(_ctx.$options.initials(_ctx.$props.name)), 1))
-        : vue.createCommentVNode("", true),
-      (_ctx.$props.src)
-        ? (vue.openBlock(), vue.createElementBlock("img", {
-            key: 1,
-            alt: _ctx.$props.alt,
-            src: _ctx.$props.src,
-            class: "h-full w-full"
-          }, null, 8, _hoisted_2))
-        : vue.createCommentVNode("", true)
-    ]),
-    _: 1
-  }, 16, ["class"]))
-}
-
-exports.render = render;

package/lib/cjs/src/components/button/Button.vue.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var Button_vue_vue_type_script_lang = require('./Button.vue_vue&type=script&lang.js');
-var Button_vue_vue_type_template_id_365674ca_lang = require('./Button.vue_vue&type=template&id=365674ca&lang.js');
-
-Button_vue_vue_type_script_lang.render = Button_vue_vue_type_template_id_365674ca_lang.render;
-
-module.exports = Button_vue_vue_type_script_lang;

package/lib/cjs/src/components/button/Button.vue_vue&type=template&id=365674ca&lang.js

@@ -1,142 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_x_spinner = vue.resolveComponent("x-spinner");
-  const _component_x_icon = vue.resolveComponent("x-icon");
-
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$props.to ? 'router-link' : _ctx.$props.tag), vue.mergeProps({
-    to: _ctx.$props.to
-  }, _ctx.$attrs, {
-    class: ["relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none flex items-center justify-center font-medium", [
-      {
-        // shadow
-        'shadow': !_ctx.$props.flat,
-      },
-      _ctx.$props.disabled ?
-        // disabled
-        'border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 cursor-not-allowed'
-        : {
-          // not disabled
-
-          // borders
-          'border border-primary-500 dark:border-primary-700 hover:border-primary-600 dark:hover:border-primary-500':
-            _ctx.$props.color === 'primary',
-          'border border-secondary-500 dark:border-secondary-700 hover:border-secondary-600 dark:hover:border-secondary-500':
-            _ctx.$props.color === 'secondary',
-          'border border-success-500 dark:border-success-700 hover:border-success-600 dark:hover:border-success-500':
-            _ctx.$props.color === 'success',
-          'border border-error-500 dark:border-error-700 hover:border-error-600 dark:hover:border-error-500':
-            _ctx.$props.color === 'error',
-          'border border-warning-500 dark:border-warning-700 hover:border-warning-600 dark:hover:border-warning-500':
-            _ctx.$props.color === 'warning',
-          'border border-gray dark:border-gray-900 hover:border-gray-700 dark:hover:border-gray-500':
-            _ctx.$props.color === 'gray',
-
-          // colors
-          'text-primary-50 bg-primary-500':
-            _ctx.$props.color === 'primary' && !_ctx.$props.outlined,
-          'text-secondary-50 bg-secondary-500':
-            _ctx.$props.color === 'secondary' && !_ctx.$props.outlined,
-          'text-success-50 bg-success-500':
-            _ctx.$props.color === 'success' && !_ctx.$props.outlined,
-          'text-error-50 bg-error-500':
-            _ctx.$props.color === 'error' && !_ctx.$props.outlined,
-          'text-warning-50 bg-warning-500':
-            _ctx.$props.color === 'warning' && !_ctx.$props.outlined,
-          'text-gray-50 bg-gray-800':
-            _ctx.$props.color === 'gray' && !_ctx.$props.outlined,
-
-          'border border-gray-300 dark:border-gray-600': _ctx.$props.outlined,
-
-          // colors hovers | actives
-          'hover:bg-primary-600 active:bg-primary-800':
-            _ctx.$props.color === 'primary' && !_ctx.$props.loading && !_ctx.$props.outlined,
-          'hover:bg-secondary-600 active:bg-secondary-800':
-            _ctx.$props.color === 'secondary' && !_ctx.$props.loading && !_ctx.$props.outlined,
-          'hover:bg-success-600 active:bg-success-800':
-            _ctx.$props.color === 'success' && !_ctx.$props.loading && !_ctx.$props.outlined,
-          'hover:bg-error-600 active:bg-error-800':
-            _ctx.$props.color === 'error' && !_ctx.$props.loading && !_ctx.$props.outlined,
-          'hover:bg-warning-600 active:bg-warning-800':
-            _ctx.$props.color === 'warning' && !_ctx.$props.loading && !_ctx.$props.outlined,
-          'hover:bg-gray-700 active:bg-gray-800':
-            _ctx.$props.color === 'gray' && !_ctx.$props.loading && !_ctx.$props.outlined,
-          'hover:bg-gray-100 dark:hover:bg-gray-700 active:bg-gray-200 dark:active:bg-gray-600':
-            _ctx.$props.color === 'none' && !_ctx.$props.loading && _ctx.$props.outlined,
-          'hover:text-gray-500 dark:hover:text-gray-400':
-            _ctx.$props.color === 'none' && !_ctx.$props.loading && !_ctx.$props.outlined,
-        },
-      _ctx.$slots.default ? {
-        // size
-        'py-1': _ctx.$props.size === 'auto',
-        'px-2 py-1 text-xs': _ctx.$props.size === 'xs',
-        'px-2 py-1 text-sm': _ctx.$props.size === 'sm',
-        'px-4 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.$props.size),
-        'px-6 py-3 text-lg': _ctx.$props.size === 'lg',
-        'px-10 py-6 text-xl': _ctx.$props.size === 'xl',
-      } : 'px-3 py-2',
-      {
-        // icon
-        'inline-flex items-center': _ctx.$slots.icon || _ctx.$props.icon,
-
-        // group
-        'rounded-button': _ctx.$props.group === false,
-        'rounded-l-button': _ctx.$props.group === 'first',
-        'rounded-r-button': _ctx.$props.group === 'last',
-
-        '!rounded-full': _ctx.$props.rounded,
-
-        // loading
-        'cursor-default': _ctx.$props.loading,
-
-        // content
-        'flex items-center justify-center': _ctx.$props.loading,
-        'flex-row-reverse': _ctx.$props.icon && _ctx.$props.iconRight
-      },
-
-    ]],
-    "aria-busy": _ctx.$props.loading ? 'true' : null,
-    "aria-disabled": _ctx.$props.tag !== 'button' && _ctx.$props.disabled ? 'true' : null,
-    disabled: _ctx.$props.disabled || _ctx.$props.loading,
-    type: _ctx.$props.tag === 'button' ? _ctx.$props.type : null
-  }), {
-    default: vue.withCtx(() => [
-      (_ctx.$props.loading)
-        ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
-            key: 0,
-            size: _ctx.$props.size,
-            class: "absolute"
-          }, null, 8, ["size"]))
-        : vue.createCommentVNode("", true),
-      (_ctx.$props.icon)
-        ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 1,
-            class: vue.normalizeClass(["flex", [{
-        'mr-2': _ctx.$slots.default && !_ctx.$props.iconRight,
-        'ml-2': _ctx.$slots.default && _ctx.$props.iconRight,
-        'invisible': _ctx.$props.loading
-      }]])
-          }, [
-            vue.createVNode(_component_x_icon, {
-              size: _ctx.$props.size,
-              icon: _ctx.$props.icon
-            }, null, 8, ["size", "icon"])
-          ], 2))
-        : vue.createCommentVNode("", true),
-      vue.createElementVNode("span", {
-        class: vue.normalizeClass({
-        'invisible': _ctx.$props.loading
-      })
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 2)
-    ]),
-    _: 3
-  }, 16, ["to", "class", "aria-busy", "aria-disabled", "disabled", "type"]))
-}
-
-exports.render = render;

package/lib/cjs/src/components/card/Card.vue.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var Card_vue_vue_type_script_lang = require('./Card.vue_vue&type=script&lang.js');
-var Card_vue_vue_type_template_id_5a1806fe_lang = require('./Card.vue_vue&type=template&id=5a1806fe&lang.js');
-
-Card_vue_vue_type_script_lang.render = Card_vue_vue_type_template_id_5a1806fe_lang.render;
-
-module.exports = Card_vue_vue_type_script_lang;

package/lib/cjs/src/components/checkbox/Checkbox.vue_vue&type=script&lang.js

@@ -1,69 +0,0 @@
-'use strict';
-
-var script = {
-  name: 'XCheckbox',
-
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    name: {
-      type: String,
-      default: null,
-    },
-
-    required: {
-      type: Boolean,
-      default: false,
-    },
-
-    size: {
-      type: String,
-      default: null,
-    },
-
-    label: {
-      type: String,
-      default: null,
-    },
-
-    flat: {
-      type: Boolean,
-      default: false,
-    },
-
-    modelValue: {
-      type: [String, Number, Boolean, Function, Object, Array],
-      default: null,
-    },
-
-    hideDetails: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['update:modelValue'],
-
-  computed: {
-    selected: {
-      get() {
-        return this.modelValue
-      },
-
-      set(val) {
-        this.$emit('update:modelValue', val);
-      },
-    },
-  },
-
-  methods: {
-    focus() {
-      this.$refs.input.focus();
-    },
-  },
-};
-
-module.exports = script;