@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/src/components/input/Input.vue

@@ -1,73 +1,176 @@
+<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 mb-1 relative">
+  <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="{
-        'text-xs': size === 'xs',
-        'text-sm': size === 'sm',
-        'text-lg': size === 'lg',
-        'text-xl': size === 'xl',
-      }"
+      :class="labelClasses"
       v-text="label"
     ></p>
 
     <div class="relative">
-      <span
-        v-if="$slots.icon"
-        class="flex items-center w-5 h-5 text-gray-500 absolute my-auto inset-y-0"
-        :class="[{
-          'ml-2 left-0': $slots.icon && !iconRight,
-          'mr-2 right-0': $slots.icon && iconRight,
-        }]"
-      >
-        <slot name="icon"></slot>
-      </span>
+      <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="focusRef"
-        class="appearance-none block w-full text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 rounded-form leading-tight
-          focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700"
+        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="[
-          disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
-          type === 'password' ? 'pr-9' : (flat ? '' : 'pr-4'),
-          flat ? 'p-0 bg-transparent' : {
-            // shadow
-            'border shadow': true,
-
-            // size
-            'py-1': size === 'auto',
-            'px-2 py-1 text-xs': size === 'xs',
-            'px-2 py-1 text-sm': size === 'sm',
-            'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(size),
-            'px-4 py-3 text-lg': size === 'lg',
-            'px-6 py-6 text-xl': size === 'xl',
-          },
+          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': $slots.icon && !iconRight,
-            '!pr-9': $slots.icon && iconRight,
+            '!pl-9': icon,
+            '!pr-9': iconRight,
             // error
-            'border-error-500 focus:border-error-500 dark:focus:border-error-500': errorInternal,
+            'border-red-500 focus:border-red-500 dark:focus:border-red-500': errorInternal,
           },
           inputClass,
         ]"
         :disabled="disabled"
+        :min="min"
         :max="max"
+        :minlength="minlength"
         :maxlength="maxlength"
-        :min="min"
         :dir="dir"
-        :minlength="minlength"
         :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-if="type === 'password' && showPasswordToggle"
+        v-else-if="type === 'password' && showPasswordToggle"
         width="24"
         height="24"
         viewBox="0 0 24 24"
@@ -75,121 +178,21 @@
         stroke-linejoin="round"
         stroke-linecap="round"
         fill="none"
-        class="text-gray-700 dark:text-gray-300 stroke-2 w-4 h-4 absolute my-auto mr-2 inset-y-0 right-1 cursor-pointer"
+        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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-          <circle cx="12" cy="12" r="3"/>
+          <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="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
-          <line x1="1" y1="1" x2="23" y2="23"/>
+          <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-error-500 mt-1" v-text="errorInternal"></p>
+    <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>
-
-<script>
-import { withProps, withValidator, withEmits, useInputtable } from '../../composables/inputtable'
-
-export default {
-  name: 'XInput',
-
-  validator: withValidator(),
-
-  props: {
-    ...withProps(),
-
-    showPasswordToggle: {
-      type: Boolean,
-      default: true,
-    },
-
-    label: {
-      type: String,
-      default: '',
-    },
-
-    iconRight: {
-      type: Boolean,
-      default: false,
-    },
-
-    dir: {
-      type: String,
-      default: 'ltr',
-    },
-
-    max: {
-      type: Number,
-      default: null,
-    },
-
-    maxlength: {
-      type: Number,
-      default: null,
-    },
-
-    min: {
-      type: Number,
-      default: null,
-    },
-
-    minlength: {
-      type: Number,
-      default: null,
-    },
-
-    placeholder: {
-      type: String,
-      default: null,
-    },
-
-    type: {
-      type: String,
-      default: 'text',
-    },
-
-    inputClass: {
-      type: String,
-      default: '',
-    },
-  },
-
-  emits: withEmits(),
-
-  setup(props, { attrs, emit }) {
-    return {
-      ...useInputtable(props, { attrs, emit }),
-    }
-  },
-
-  data() {
-    return {
-      currentType: this.type,
-    }
-  },
-
-  methods: {
-    onChange(e) {
-      if (this.type === 'number') {
-        if (this.min !== null) {
-          if (e.target.value < this.min) e.target.value = this.min
-        }
-
-        if (this.max !== null) {
-          if (e.target.value > this.max) e.target.value = this.max
-        }
-      }
-    },
-    togglePasswordVisibility() {
-      this.currentType = this.currentType === 'password' ? 'text' : 'password'
-    },
-  },
-}
-</script>

package/src/components/link/Link.vue

@@ -1,17 +1,64 @@
+<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-colors duration-150 ease-in-out cursor-pointer"
+    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'] : ''],
       {
-        // color
-        'hover:text-gray-600 dark:hover:text-gray-300': color === 'gray',
-        'text-primary-500 hover:text-primary-600': color === 'primary',
-        'text-error-500 hover:text-error-600': color === 'error',
-        'text-warning-500 hover:text-warning-600': color === 'warning',
-        'text-success-500 hover:text-success-600': color === 'success',
-        // underline
         'underline': underline
       },
     ]"
@@ -42,48 +89,22 @@
   </component>
 </template>
 
-<script>
-const validator = {
-  color: [
-    'error',
-    'gray',
-    'primary',
-    'success',
-    'warning',
-  ],
-}
-
-export default {
-  name: 'XLink',
-
-  validator,
+<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);
+      }
+    }
 
-  props: {
-    color: {
-      default: 'gray',
-      type: String,
-      validator: (value) => validator.color.includes(value),
-    },
-
-    external: {
-      default: false,
-      type: Boolean,
-    },
-
-    tag: {
-      default: 'a',
-      type: String,
-    },
-
-    to: {
-      type: String,
-      default: undefined,
-    },
-
-    underline: {
-      default: false,
-      type: Boolean,
-    },
-  },
-}
-</script>
+    :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>