Initial commit

composables/use-checkbox.ts

@@ -0,0 +1,44 @@
+import { useField } from 'vee-validate'
+import { computed, ref, toRef } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+
+interface Props {
+  id: string
+  label?: string
+  disabled?: boolean
+  modelValue?: boolean | string | number
+  trueValue?: boolean | string | number
+  falseValue?: boolean | string | number
+  required?: boolean
+}
+
+export default (props: Props, slots: ComponentInternalInstance['slots']) => {
+  const { checked, errorMessage, handleChange } = useField(
+    toRef(props, 'id'),
+    computed(() => ({
+      required: props.required,
+    })),
+    {
+      type: 'checkbox',
+      initialValue: props.modelValue,
+      checkedValue: props.trueValue ?? true,
+      uncheckedValue: props.falseValue ?? false,
+      syncVModel: true,
+    },
+  )
+
+  const focused = ref(false)
+
+  const active = computed(() => !props.disabled)
+  const invalid = computed(() => active.value && !!errorMessage.value)
+  const hasLabel = computed(() => !!props.label || slots.default)
+
+  return {
+    focused,
+    checked,
+    active,
+    invalid,
+    hasLabel,
+    handleChange,
+  }
+}

composables/use-classname.ts

@@ -0,0 +1,63 @@
+const namespace = 'ui'
+const statePrefix = 'is-'
+
+function _bem(namespace: string, block: string, blockSuffix: string, element: string, modifier: string) {
+  let cls = `${block}`
+  if (blockSuffix)
+    cls += `-${blockSuffix}`
+
+  if (element)
+    cls += `__${element}`
+
+  if (modifier)
+    cls += `--${modifier}`
+
+  return cls
+}
+
+export default (block: string) => {
+  const b = (blockSuffix: string = '') => _bem(namespace, block, blockSuffix, '', '')
+  const e = (element: string) =>
+    element ? _bem(namespace, block, '', element, '') : ''
+  const m = (modifier: string) =>
+    modifier ? _bem(namespace, block, '', '', modifier) : ''
+  const be = (blockSuffix: string, element: string) =>
+    blockSuffix && element
+      ? _bem(namespace, block, blockSuffix, element, '')
+      : ''
+  const em = (element: string, modifier: string) =>
+    element && modifier ? _bem(namespace, block, '', element, modifier) : ''
+  const bm = (blockSuffix: string, modifier: string) =>
+    blockSuffix && modifier
+      ? _bem(namespace, block, blockSuffix, '', modifier)
+      : ''
+  const bem = (blockSuffix: string, element: string, modifier: string) =>
+    blockSuffix && element && modifier
+      ? _bem(namespace, block, blockSuffix, element, modifier)
+      : ''
+  const is = (name: string, ...args: any[]) => {
+    const state = args.length >= 1 ? args[0] : true
+    return name && state ? `${statePrefix}${name}` : ''
+  }
+  const has = (name: string, ...args: any[]) => {
+    const state = args.length >= 1 ? args[0] : true
+    return name && state ? `has-${name}` : ''
+  }
+  const exp = (condition: boolean, trueState: string, falseState: string = '') => {
+    return condition ? trueState : falseState
+  }
+
+  return {
+    namespace,
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
+    has,
+    exp,
+  }
+}

composables/use-notify.ts

@@ -0,0 +1,3 @@
+import notify from '../components/ui/notification/notify'
+
+export default () => notify

composables/use-radio.ts

@@ -0,0 +1,40 @@
+import { useField } from 'vee-validate'
+import { computed, ref, toRef } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+
+interface Props {
+  id: string
+  value: string | number
+  label?: string
+  disabled?: boolean
+  modelValue?: string | number
+  required?: boolean
+}
+
+export default (props: Props, slots: ComponentInternalInstance['slots']) => {
+  const { checked, handleChange } = useField(
+    toRef(props, 'id'),
+    computed(() => ({
+      required: props.required,
+    })),
+    {
+      type: 'radio',
+      initialValue: props.modelValue,
+      checkedValue: props.value,
+      syncVModel: true,
+    },
+  )
+
+  const focused = ref(false)
+
+  const active = computed(() => !props.disabled)
+  const hasLabel = computed(() => !!props.label || slots.default)
+
+  return {
+    focused,
+    active,
+    checked,
+    hasLabel,
+    handleChange,
+  }
+}