@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,178 @@
+<script lang="ts">
+const checkboxProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  value: [String, Number],
+  indeterminate: Boolean,
+  glow: Boolean,
+}
+
+export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>
+
+type InternalClasses = 'wrapper' | 'content' | 'box' | 'icon' | 'label'
+type InternalExtraData = { checked: Ref<boolean>; isInsideForm: boolean; isInsideFormGroup: boolean;}
+export interface CheckboxTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {}
+
+export default {
+  name: 'XCheckbox',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch, type ExtractPublicPropTypes, type Ref, unref, nextTick } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+
+import XSpinner from '../spinner/Spinner.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(checkboxProps)
+
+const emit = defineEmits(useInputtable.emits(false))
+
+const elRef = ref<HTMLElement | null>(null)
+const checked = ref(false)
+
+function toggle() {
+  checked.value = !checked.value
+}
+
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  hideFooterInternal,
+  isInsideForm,
+  isInsideFormGroup,
+  isFirstValidation,
+  formGroup,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
+if (isInsideFormGroup) {
+  watch(() => formGroup.value, () => {
+    const formGroupValue = unref(formGroup.value)
+
+    if (formGroupValue && Array.isArray(formGroupValue) && formGroupValue.includes(props.value as never)) checked.value = true
+    else checked.value = false
+  }, { immediate: true, deep: true })
+
+  watch(() => checked.value, (value) => {
+    if (!props.value) return
+
+    const formGroupValue = unref(formGroup.value)
+
+    if (value) {
+      if (formGroupValue && Array.isArray(formGroupValue)) {
+        if (!formGroupValue.includes(props.value as never)) {
+          const newValue = [...formGroupValue, props.value]
+
+          formGroup.setValue(newValue as any)
+        }
+      } else {
+        formGroup.setValue([props.value as any])
+      }
+    } else {
+      if (formGroupValue && Array.isArray(formGroupValue) && formGroupValue.includes(props.value as never)) {
+        const index = formGroupValue.findIndex((v) => v === props.value)
+        const newValue = [...formGroupValue]
+
+        newValue.splice(index, 1)
+        formGroup.setValue(newValue as any)
+      }
+    }
+  })
+} else {
+  watch(() => props.modelValue, (value) => {
+    checked.value = !!value
+  }, { immediate: true })
+
+  watch(() => checked.value, (value) => {
+    emit('update:modelValue', value)
+  })
+}
+
+const listeners = {
+  input: () => {
+    if (isInsideFormGroup) return
+    setTimeout(() => {
+      if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+    }, 0)
+  },
+}
+
+const { styles, classes, className } = useTheme('Checkbox', {}, props, { checked, isInsideForm, isInsideFormGroup })
+
+defineExpose({ focus, blur, toggle, reset, validate, setError })
+</script>
+
+<template>
+  <label
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <div
+      ref="elRef"
+      :class="classes.content"
+      tabindex="0"
+      @keypress.prevent.stop.space="toggle"
+    >
+      <input
+        :id="id"
+        v-model="checked"
+        :name="name"
+        :aria-checked="indeterminate ? 'mixed' : (checked ? 'true' : 'false')"
+        :aria-disabled="disabled ? 'true' : undefined"
+        type="checkbox"
+        class="invisible absolute"
+        :disabled="disabled || loading"
+        :required="required"
+        v-on="listeners"
+      />
+      <div
+        :class="[
+          classes.box,
+          [(glow && !disabled && !loading) ? $style['checkbox--glow'] : ''],
+        ]"
+      >
+        <x-spinner v-if="loading" :size="size" class="absolute" />
+        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-gray-900"></span>
+        <slot v-else name="icon">
+          <svg
+            viewBox="0 0 20 20"
+            :class="[classes.icon, { 'opacity-0': !checked }]"
+          >
+            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
+          </svg>
+        </slot>
+      </div>
+      <div :class="classes.label">
+        <span v-if="label" v-text="label"></span>
+        <slot v-else></slot>
+      </div>
+    </div>
+
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+  </label>
+</template>
+
+<style lang="postcss" module>
+  .checkbox {
+    &--glow {
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-checkbox-glow), 0 4px 6px -4px var(--x-checkbox-glow);
+    }
+  }
+</style>

package/src/components/checkbox/__tests__/Checkbox.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Checkbox from '../Checkbox.vue'
+
+describe('Checkbox', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Checkbox)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default as XCheckbox } from './Checkbox.vue'
+export type { CheckboxProps, CheckboxTheme } from './Checkbox.vue'

package/src/components/checkbox/theme/Checkbox.base.theme.ts

@@ -0,0 +1,108 @@
+import type { CheckboxTheme } from '../Checkbox.vue'
+
+const theme: CheckboxTheme = {
+  classes: {
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm) classes.push('mb-3')
+
+      return classes
+    },
+
+    box: ({ props }) => {
+      const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-4 w-4')
+      else if (props.size === 'xl') classes.push('h-6 w-6')
+      else classes.push('h-5 w-5')
+
+      return classes
+    },
+
+    content: ({ props }) => {
+      const classes = ['flex items-center']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
+    icon: ({ props }) => {
+      const classes = ['fill-current text-white dark:text-gray-900']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
+      else if (props.size === 'xl') classes.push('h-4 w-4')
+      else classes.push('h-3 w-3')
+
+      return classes
+    },
+
+    label: ({ props }) => {
+      const classes = ['inline-block font-medium text-gray-800 dark:text-gray-200 pl-2']
+
+      if (props.size === 'xs') classes.push('text-xs')
+      else if (props.size === 'sm') classes.push('text-sm')
+      else if (props.size === 'lg') classes.push('text-lg')
+      else if (props.size === 'xl') classes.push('text-xl')
+
+      return classes
+    },
+  },
+
+  styles({ props, colors, css, data }) {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    if (props.loading) {
+      return css.variables({
+        bg: 'transparent',
+        border: 'transparent',
+        dark: {
+          bg: 'transparent',
+          border: 'transparent',
+        },
+      })
+    }
+
+    if (props.disabled) {
+      vars.push(css.variables({
+        bg: gray[100],
+        border: gray[200],
+        dark: {
+          bg: gray[800],
+          border: gray[700],
+        },
+      }))
+    } else {
+      if (data.checked) {
+        vars.push(css.variables({
+          bg: color[500],
+          border: color[500],
+          dark: {
+            bg: color[500],
+            border: color[500],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: '#fff',
+          border: props.glow ? color[300] : gray[300],
+          dark: {
+            bg: gray[900],
+            border: props.glow ? color[300] : gray[400],
+          },
+        }))
+      }
+
+      if (props.glow) {
+        vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+      }
+    }
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/checkbox/theme/Checkbox.carbon.theme.ts

@@ -0,0 +1,108 @@
+import type { CheckboxTheme } from '../Checkbox.vue'
+
+const theme: CheckboxTheme = {
+  classes: {
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
+
+      return classes
+    },
+
+    box: ({ props }) => {
+      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
+      else if (props.size === 'xl') classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
+
+      return classes
+    },
+
+    content: ({ props }) => {
+      const classes = ['flex']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
+    icon: ({ props }) => {
+      const classes = ['fill-current text-white dark:text-gray-900']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
+      else if (props.size === 'xl') classes.push('h-3.5 w-3.5')
+      else classes.push('h-2.5 w-2.5')
+
+      return classes
+    },
+
+    label: ({ props }) => {
+      const classes = ['text-gray-800 dark:text-gray-200 pl-2 text-sm']
+
+      if (props.size === 'xs') classes.push('text-xs')
+      else if (props.size === 'sm') classes.push('text-sm')
+      else if (props.size === 'lg') classes.push('text-lg')
+      else if (props.size === 'xl') classes.push('text-xl')
+
+      return classes
+    },
+  },
+
+  styles({ props, colors, css, data }) {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    if (props.loading) {
+      return css.variables({
+        bg: 'transparent',
+        border: 'transparent',
+        dark: {
+          bg: 'transparent',
+          border: 'transparent',
+        },
+      })
+    }
+
+    if (props.disabled) {
+      vars.push(css.variables({
+        bg: gray[100],
+        border: gray[200],
+        dark: {
+          bg: gray[800],
+          border: gray[700],
+        },
+      }))
+    } else {
+      if (data.checked) {
+        vars.push(css.variables({
+          bg: color[500],
+          border: color[500],
+          dark: {
+            bg: color[500],
+            border: color[500],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: '#fff',
+          border: props.glow ? color[300] : gray[900],
+          dark: {
+            bg: gray[900],
+            border: props.glow ? color[300] : gray[300],
+          },
+        }))
+      }
+
+      if (props.glow) {
+        vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+      }
+    }
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/container/Container.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+const containerProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+}
+
+export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>
+
+type InternalClasses = 'wrapper'
+export interface ContainerTheme extends ThemeComponent<ContainerProps, InternalClasses> {}
+
+export default { name: 'XContainer' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(containerProps)
+
+const { styles, classes, className } = useTheme('Container', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>

package/src/components/container/__tests__/Container.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Container from '../Container.vue'
+
+describe('Container', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Container)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/container/index.ts

@@ -0,0 +1,2 @@
+export { default as XContainer } from './Container.vue'
+export type { ContainerProps, ContainerTheme } from './Container.vue'

package/src/components/container/theme/Container.base.theme.ts

@@ -0,0 +1,9 @@
+import type { ContainerTheme } from '../Container.vue'
+
+const theme: ContainerTheme = {
+  classes: {
+    wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
+  },
+}
+
+export default theme

package/src/components/container/theme/Container.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { ContainerTheme } from '../Container.vue'
+
+import BaseTheme from './Container.base.theme'
+
+const theme: ContainerTheme = BaseTheme
+
+export default theme

package/src/components/divider/Divider.vue

@@ -0,0 +1,62 @@
+<script lang="ts">
+const dividerProps = {
+  label: String,
+  vertical: Boolean,
+}
+
+export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>
+
+type InternalClasses = 'wrapper' | 'label' | 'line'
+export interface DividerTheme extends ThemeComponent<DividerProps, InternalClasses> {}
+
+export default { name: 'XDivider' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(dividerProps)
+
+const { styles, classes, className } = useTheme('Divider', {}, props)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
+  >
+    <div
+      :class="classes.line"
+      :style="[
+        {
+          width: vertical ? '1px' : 'auto',
+          height: !vertical ? '1px' : 'auto'
+        }
+      ]"
+    ></div>
+    <div
+      v-if="label"
+      class="font-medium text-sm text-gray-600 dark:text-gray-300"
+      :class="[
+        classes.label,
+        {
+          'my-2': vertical,
+          'mx-4': !vertical
+        }]"
+      v-text="label"
+    ></div>
+    <div
+      :class="classes.line"
+      :style="[
+        {
+          width: vertical ? '1px' : 'auto',
+          height: !vertical ? '1px' : 'auto'
+        }
+      ]"
+    ></div>
+  </div>
+</template>

package/src/components/divider/__tests__/Divider.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Divider from '../Divider.vue'
+
+describe('Divider', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Divider)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/divider/index.ts

@@ -0,0 +1,2 @@
+export { default as XDivider } from './Divider.vue'
+export type { DividerProps, DividerTheme } from './Divider.vue'

package/src/components/divider/theme/Divider.base.theme.ts

@@ -0,0 +1,13 @@
+import type { DividerTheme } from '../Divider.vue'
+
+const theme: DividerTheme = {
+  classes: {
+    wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
+
+    label: 'font-medium text-sm text-gray-600 dark:text-gray-300',
+
+    line: 'bg-gray-200 dark:bg-slate-700 flex-grow',
+  },
+}
+
+export default theme

package/src/components/divider/theme/Divider.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { DividerTheme } from '../Divider.vue'
+
+import BaseTheme from './Divider.base.theme'
+
+const theme: DividerTheme = BaseTheme
+
+export default theme