@indielayer/ui 0.1.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -18,16 +18,17 @@
   ],
   "files": [
     "lib",
-    "types"
+    "src"
   ],
-  "main": "lib/cjs/src",
-  "module": "lib/esm/src",
+  "main": "lib/cjs",
+  "module": "lib/esm",
   "browser": "lib/umd",
   "exports": {
     ".": {
-      "import": "./lib/esm/src/index.js",
-      "require": "./lib/cjs/src/index.js"
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
     },
+    "./nuxt": "./src/nuxt.js",
     "./tailwind.preset": "./lib/tailwind.preset.js",
     "./tailwind.preset.js": "./lib/tailwind.preset.js"
   },
@@ -45,14 +46,15 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
-    "postcss": "^8.3.8",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.4",
     "rollup": "^2.48.0",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
-    "tailwindcss": "^2.1.2"
+    "tailwindcss": "^3.0.0"
   },
   "browserslist": [
     "> 1%",
@@ -71,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7cfa31e85d049e4f82cea4b1aeb95faf222dc08a"
+  "gitHead": "4d706626bbb60894f6cd7e9aaa72f4e918d4aa43"
 }

package/src/components/avatar/Avatar.vue

@@ -0,0 +1,120 @@
+<template>
+  <component
+    :is="tag"
+    class="inline-flex items-center justify-center overflow-hidden"
+    :class="[
+      // color
+      { [`bg-${color}-500 text-${color}-50`]: !source && !outlined },
+      {
+        // border
+        'border border-gray-400 dark:border-gray-500': !source && outlined,
+
+        // size
+        'h-6 w-6 text-xs': size === 'xs',
+        'h-7 w-7 text-sm': size === 'sm',
+        'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes(size),
+        'h-12 w-12 text-lg': size === 'lg',
+        'h-20 w-20 text-2xl': size === 'xl',
+        'h-36 w-36 text-2xl': size === '2xl',
+      },
+      squared ? 'rounded-md' : 'rounded-full'
+    ]"
+  >
+    <span
+      v-if="!source && name"
+      class="leading-none"
+    >{{ initials }}</span>
+
+    <img
+      v-if="source"
+      :alt="alt"
+      :src="src"
+      class="h-full w-full"
+    />
+  </component>
+</template>
+
+<script>
+const validator = {
+  variant: [
+    'rounded',
+    'squared',
+  ],
+}
+
+export default {
+  name: 'XAvatar',
+
+  validator,
+
+  props: {
+    alt: {
+      type: String,
+      default: null,
+    },
+
+    color: {
+      type: String,
+      default: 'primary',
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+
+    src: {
+      type: String,
+      default: null,
+    },
+
+    tag: {
+      type: String,
+      default: 'span',
+    },
+
+    squared: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      source: null,
+    }
+  },
+
+  computed: {
+    initials() {
+      if (this.name) {
+        const initials = this.name.match(/\b\w/g) || []
+
+        return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
+      }
+
+      return ''
+    },
+  },
+
+  mounted() {
+    if (this.src) {
+      const img = new Image()
+
+      img.onload = () => { this.source = this.src }
+      img.onerror = () => { }
+      img.src = this.src
+    }
+  },
+}
+</script>

package/src/components/button/Button.vue

@@ -0,0 +1,156 @@
+<template>
+  <component
+    :is="to ? 'router-link' : tag"
+    ref="focusRef"
+    :to="to"
+    class="relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none inline-block items-center justify-center font-medium"
+    :class="[
+      {
+        'shadow': !flat && !glow,
+        [`shadow-lg shadow-${color}-500/50`]: !flat && glow,
+      },
+      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
+          [`border border-${color}-500 text-${color}-500`]: outlined,
+
+          // colors
+          [`border border-transparent text-${color}-50 bg-${color}-500`]: !outlined,
+
+          // colors hovers | actives
+          'hover:bg-dark-image active:bg-darker-image active:shadow-none': !loading && !outlined,
+          [`hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:hover:active:bg-gray-600`]: !loading && outlined,
+        },
+      $slots.default ? {
+        // size
+        'py-1': size === 'auto',
+        'px-2 py-1 text-xs': size === 'xs',
+        'px-2 py-1 text-sm': size === 'sm',
+        'px-4 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(size),
+        'px-6 py-3 text-lg': size === 'lg',
+        'px-10 py-6 text-xl': size === 'xl',
+      } : 'px-3 py-2',
+      {
+        // icon
+        'inline-flex items-center': icon,
+
+        // group
+        'rounded-button': group === false,
+        'rounded-l-button': group === 'first',
+        'rounded-r-button': group === 'last',
+
+        '!rounded-full': rounded,
+
+        // loading
+        'cursor-default': loading,
+
+        // content
+        'flex items-center justify-center': loading,
+        'flex-row-reverse': icon && iconRight
+      },
+
+    ]"
+
+    :aria-busy="loading ? 'true' : null"
+    :aria-disabled="tag !== 'button' && disabled ? 'true' : null"
+    :disabled="disabled || loading"
+    :type="tag === 'button' ? type : null"
+  >
+    <x-spinner v-if="loading" :size="size" class="absolute" />
+    <span
+      v-if="icon"
+      class="flex"
+      :class="[{
+        'mr-2': $slots.default && !iconRight,
+        'ml-2': $slots.default && iconRight,
+        'invisible': loading
+      }]"
+    >
+      <x-icon :size="size" :icon="icon" />
+    </span>
+    <span :class="{ 'invisible': loading }">
+      <slot></slot>
+    </span>
+  </component>
+</template>
+
+<script>
+import { withProps, withValidator, useInteractive } from '../../composables/interactive'
+import XSpinner from '../spinner/Spinner.vue'
+import XIcon from '../icon/Icon.vue'
+
+const validator = {
+  group: [false, true, '', 'first', 'last'],
+}
+
+export default {
+  name: 'XButton',
+  components: {
+    XSpinner,
+    XIcon,
+  },
+
+  validator: {
+    ...withValidator(),
+    ...validator,
+  },
+
+  props: {
+    ...withProps(),
+
+    group: {
+      default: false,
+      type: [String, Boolean],
+      validator: (value) => validator.group.includes(value),
+    },
+
+    icon: {
+      type: String,
+      default: null,
+    },
+
+    iconRight: {
+      type: Boolean,
+      default: false,
+    },
+
+    to: {
+      type: String,
+      default: undefined,
+    },
+
+    tag: {
+      type: String,
+      default: 'button',
+    },
+
+    type: {
+      type: String,
+      default: 'button',
+    },
+
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+
+    glow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup() {
+    return {
+      ...useInteractive(),
+    }
+  },
+}
+</script>

package/src/components/card/Card.vue

@@ -0,0 +1,30 @@
+<template>
+  <component
+    :is="tag"
+    class="rounded bg-white dark:bg-gray-800"
+    :class="[
+      {
+        'shadow': !flat,
+      },
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XCard',
+  props: {
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+}
+</script>

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,128 @@
+<template>
+  <label class="inline-block mb-1 relative cursor-pointer pb-2">
+    <div
+      ref="focusRef"
+      class="flex items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+      :tabindex="0"
+      @keypress.prevent.stop.enter.space="toggle"
+    >
+      <input
+        v-model="checked"
+        :aria-checked="checked ? 'true' : 'false'"
+        :aria-disabled="disabled ? 'true' : null"
+        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="[
+          {
+            '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,
+          }
+        ]"
+      >
+        <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',
+          }"
+          viewBox="0 0 20 20"
+        >
+          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
+        </svg>
+      </div>
+      <div
+        class="inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"
+        :class="{
+          'text-xs': size === 'xs',
+          'text-sm': size === 'sm',
+          'text-lg': size === 'lg',
+          'text-xl': size === 'xl',
+        }"
+      >
+        <span v-if="label" v-text="label"></span>
+        <slot v-else></slot>
+      </div>
+    </div>
+    <p v-if="errorInternal" class="text-sm text-error-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 }),
+    }
+  },
+
+  computed: {
+    checked: {
+      get() {
+        return this.modelValue
+      },
+
+      set(val) {
+        this.$emit('update:modelValue', val)
+      },
+    },
+  },
+
+  methods: {
+    toggle() {
+      this.$emit('update:modelValue', !this.modelValue)
+    },
+  },
+}
+</script>

package/src/components/collapse/Collapse.vue

@@ -0,0 +1,118 @@
+<template>
+  <component
+    :is="tag"
+    :aria-disabled="disabled"
+    :aria-expanded="collapsed ? 'false' : 'true'"
+  >
+    <div
+      class="flex items-center relative"
+      :class="{
+        'cursor-pointer' : !disabled,
+        'flex-row-reverse': iconLeft,
+      }"
+      @click="toggleExpand()"
+    >
+      <div class="flex-1">
+        <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"
+          :class="[
+            iconLeft ? 'mr-2' : 'ml-2',
+            { 'rotate-180': !collapsed }
+          ]"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </div>
+    </div>
+
+    <template v-if="$slots.summary">
+      <slot name="summary"></slot>
+    </template>
+
+    <div
+      class="overflow-y-hidden transition-all duration-300 ease-in-out"
+      :style="{ maxHeight: maxHeight + 'px' }"
+    >
+      <div ref="content">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </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',
+    }
+  },
+
+  beforeMount() {
+    window.addEventListener('resize', this.resizeContent)
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('resize', this.resizeContent)
+  },
+
+  mounted() {
+    this.resizeContent()
+  },
+
+  methods: {
+    toggleExpand() {
+      if (this.disabled) return
+
+      this.collapsed = !this.collapsed
+      this.$emit('toggle', this.collapsed)
+      this.resizeContent()
+    },
+
+    resizeContent() {
+      if (this.collapsed) {
+        this.maxHeight = 0
+      } else {
+        this.maxHeight = this.$refs.content.offsetHeight
+      }
+    },
+  },
+}
+</script>