init component

node_modules/buetify/lib/components/form/field/BField.d.ts

@@ -0,0 +1,157 @@
+import '../sass/tools.sass';
+import { PropType, VNode, ExtractPropTypes } from 'vue';
+import { AllColorsVariant } from '../../../types/ColorVariants';
+export declare type FieldPosition = 'is-left' | 'is-centered' | 'is-right';
+export declare const BFieldPropsDefinition: {
+    isGrouped: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isGroupedMultiline: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    position: {
+        type: PropType<"is-left" | "is-right" | "is-centered">;
+        default: string;
+    };
+    isHorizontal: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    hasAddons: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    customLabelClass: {
+        type: PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: PropType<AllColorsVariant>;
+        required: boolean;
+    };
+    message: {
+        type: PropType<string | {
+            [K: string]: boolean;
+        } | (string | {
+            [K: string]: boolean;
+        })[]>;
+        required: boolean;
+    };
+    isExpanded: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    labelFor: PropType<string>;
+    label: {
+        type: PropType<string>;
+        default: string;
+    };
+    themeMap: {
+        type: PropType<import("../../..").ThemeColorMap>;
+        required: boolean;
+        default: import("fp-ts/lib/function").Lazy<import("../../..").ThemeColorMap>;
+    };
+    isThemeable: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+};
+export declare type BFieldProps = ExtractPropTypes<typeof BFieldPropsDefinition>;
+declare const BField: import("vue").DefineComponent<{
+    isGrouped: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isGroupedMultiline: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    position: {
+        type: PropType<"is-left" | "is-right" | "is-centered">;
+        default: string;
+    };
+    isHorizontal: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    hasAddons: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    customLabelClass: {
+        type: PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: PropType<AllColorsVariant>;
+        required: boolean;
+    };
+    message: {
+        type: PropType<string | {
+            [K: string]: boolean;
+        } | (string | {
+            [K: string]: boolean;
+        })[]>;
+        required: boolean;
+    };
+    isExpanded: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    labelFor: PropType<string>;
+    label: {
+        type: PropType<string>;
+        default: string;
+    };
+    themeMap: {
+        type: PropType<import("../../..").ThemeColorMap>;
+        required: boolean;
+        default: import("fp-ts/lib/function").Lazy<import("../../..").ThemeColorMap>;
+    };
+    isThemeable: {
+        type: PropType<boolean>;
+        required: boolean;
+        default: boolean;
+    };
+}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    isThemeable: boolean;
+    themeMap: import("../../..").ThemeColorMap;
+    isExpanded: boolean;
+    position: "is-left" | "is-right" | "is-centered";
+    label: string;
+    isGrouped: boolean;
+    isGroupedMultiline: boolean;
+    isHorizontal: boolean;
+    hasAddons: boolean;
+    customLabelClass: string;
+} & {
+    variant?: "" | "is-black-ter" | "is-orange" | "is-primary" | "is-info" | "is-link" | "is-success" | "is-warning" | "is-danger" | "is-white" | "is-black" | "is-light" | "is-dark" | "is-black-bis" | "is-grey-darker" | "is-grey-dark" | "is-grey" | "is-grey-light" | "is-grey-lighter" | "is-white-ter" | "is-white-bis" | undefined;
+    message?: string | {
+        [K: string]: boolean;
+    } | (string | {
+        [K: string]: boolean;
+    })[] | undefined;
+    labelFor?: string | undefined;
+}>, {
+    isThemeable: boolean;
+    themeMap: import("../../..").ThemeColorMap;
+    isExpanded: boolean;
+    position: "is-left" | "is-right" | "is-centered";
+    label: string;
+    isGrouped: boolean;
+    isGroupedMultiline: boolean;
+    isHorizontal: boolean;
+    hasAddons: boolean;
+    customLabelClass: string;
+}>;
+export interface BFieldBodyProps {
+    message?: string;
+    variant?: AllColorsVariant;
+    tag?: string;
+}
+export default BField;

node_modules/buetify/lib/components/form/field/BField.js

@@ -0,0 +1,164 @@
+import "../../../../src/components/form/sass/tools.sass";
+import { constant } from 'fp-ts/lib/function';
+import { provideFieldData, ProvideFieldDataPropsDefinition } from '../../../composables/fieldData';
+import { DefaultThemePropsDefinition } from '../../../composables/theme';
+import { h, defineComponent, computed, shallowRef, watch } from 'vue';
+
+function useRootClasses(props) {
+  return {
+    'is-expanded': props.isExpanded,
+    'is-horizontal': props.isHorizontal
+  };
+}
+
+function useFieldType(isGrouped, hasAddons) {
+  return isGrouped ? 'is-grouped' : hasAddons ? 'has-addons' : '';
+}
+
+function useInnerFieldClasses(props, fieldType) {
+  const isGrouped = props.isGrouped;
+  const position = props.position;
+  return [fieldType, {
+    'flex-grow-1': props.isExpanded,
+    'is-grouped-multiline': props.isGroupedMultiline,
+    'is-horizontal': props.isHorizontal,
+    'is-grouped-centered': isGrouped && position === 'is-centered',
+    'is-grouped-right': isGrouped && position === 'is-right',
+    'has-addons-centered': !isGrouped && position === 'is-centered',
+    'has-addons-right': !isGrouped && position === 'is-right'
+  }];
+}
+
+export const BFieldPropsDefinition = { ...DefaultThemePropsDefinition,
+  ...ProvideFieldDataPropsDefinition,
+  isGrouped: {
+    type: Boolean,
+    default: false
+  },
+  isGroupedMultiline: {
+    type: Boolean,
+    default: false
+  },
+  position: {
+    type: String,
+    default: 'is-left'
+  },
+  isHorizontal: {
+    type: Boolean,
+    default: false
+  },
+  hasAddons: {
+    type: Boolean,
+    default: true
+  },
+  customLabelClass: {
+    type: String,
+    default: ''
+  }
+};
+
+function generateInnerLabel(fieldData, customClass) {
+  return h('label', {
+    class: ['label', customClass],
+    id: fieldData.labelId.value,
+    for: fieldData.id.value
+  }, fieldData.label.value);
+}
+
+function generateHorizontalLabel(fieldData, customClass, size) {
+  return h('div', {
+    class: ['field-label', size]
+  }, [generateInnerLabel(fieldData, customClass)]);
+}
+
+function generateLabel(isHorizontal, fieldData, customClass, size) {
+  const label = fieldData.label.value;
+
+  if (isHorizontal && !!label) {
+    return [generateHorizontalLabel(fieldData, customClass, size)];
+  } else if (!isHorizontal && !!label) {
+    return [generateInnerLabel(fieldData, customClass)];
+  } else {
+    return [];
+  }
+}
+
+function generateHelpMessage(isHorizontal, fieldDataAttrs) {
+  return !isHorizontal && !!fieldDataAttrs.message.value ? h('p', {
+    class: ['help', fieldDataAttrs.messageVariant.value],
+    innerHTML: fieldDataAttrs.message.value
+  }) : undefined;
+}
+
+function generateBody(props, fieldData, role, hasInnerField, fieldType, slots) {
+  if (props.isHorizontal) {
+    return [h(BFieldBody, // eslint-disable-line
+    {
+      class: {
+        'is-expanded': fieldData.isExpanded.value
+      },
+      message: fieldData.message.value,
+      variant: fieldData.messageVariant.value,
+      role
+    }, slots.default)];
+  } else if (hasInnerField) {
+    return [h('div', {
+      class: 'field-body'
+    }, [h(BField, // eslint-disable-line
+    {
+      hasAddons: false,
+      variant: fieldData.messageVariant.value,
+      class: useInnerFieldClasses(props, fieldType)
+    }, slots.default)])];
+  } else {
+    return slots.default ? slots.default() : [];
+  }
+}
+
+const BField = defineComponent({
+  name: 'b-field',
+  props: BFieldPropsDefinition,
+
+  setup(props, {
+    slots
+  }) {
+    const field = shallowRef(null);
+    const fieldData = provideFieldData(props);
+    const role = computed(() => props.isGrouped ? 'group' : '');
+    const size = shallowRef('');
+    watch(field, newVal => {
+      if (props.isHorizontal && newVal) {
+        // Bulma docs: .is-normal for any .input or .button
+        const elements = newVal.querySelectorAll('.input, .select, .button, .textarea');
+
+        if (elements.length > 0) {
+          size.value = 'is-normal';
+        }
+      }
+    });
+    return () => {
+      const hasAddons = !!(props.hasAddons && !props.isHorizontal && slots.default && slots.default().length > 1);
+      const hasInnerField = props.isGrouped || props.isGroupedMultiline || hasAddons;
+      const nodes = [...generateLabel(props.isHorizontal, fieldData.attrs, props.customLabelClass, size.value), ...generateBody(props, fieldData.attrs, role.value, hasInnerField, useFieldType(props.isGrouped, hasAddons), slots), generateHelpMessage(props.isHorizontal, fieldData.attrs)];
+      return h('div', {
+        ref: field,
+        class: ['field', useRootClasses(props)],
+        role: role.value
+      }, nodes);
+    };
+  }
+
+}); // eslint-disable-next-line
+
+function BFieldBody(props, {
+  attrs,
+  slots
+}) {
+  const nodes = slots.default ? slots.default() : [];
+  return h(props.tag ?? 'div', {
+    class: 'field-body'
+  }, nodes.map(element => element.el ? element : h(BField, props, constant(element))));
+}
+
+export default BField;
+//# sourceMappingURL=BField.js.map

node_modules/buetify/lib/components/form/field/index.d.ts

@@ -0,0 +1,3 @@
+import BField from './BField';
+export default BField;
+export { BField };

node_modules/buetify/lib/components/form/field/index.js

@@ -0,0 +1,4 @@
+import BField from './BField';
+export default BField;
+export { BField };
+//# sourceMappingURL=index.js.map

node_modules/buetify/lib/components/form/field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/form/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAP,MAAmB,UAAnB;AAEA,eAAe,MAAf;AAEA,SAAS,MAAT","sourcesContent":["import BField from './BField';\n\nexport default BField;\n\nexport { BField };\n"],"sourceRoot":"","file":"index.js"}