add nova

2024-09-01 18:54:23 +05:00
parent 76d18365a5
commit 061f09eca1
1597 changed files with 109451 additions and 1 deletions
--- a/nova/resources/js/components/DefaultField.vue
+++ b/nova/resources/js/components/DefaultField.vue
@@ -0,0 +1,111 @@
+<template>
+  <div v-if="field.visible" :class="fieldWrapperClasses">
+    <div v-if="field.withLabel" :class="labelClasses">
+      <slot>
+        <FormLabel
+          :label-for="labelFor || field.uniqueKey"
+          class="space-x-1"
+          :class="{ 'mb-2': shouldShowHelpText }"
+        >
+          <span>
+            {{ fieldLabel }}
+          </span>
+          <span v-if="field.required" class="text-red-500 text-sm">
+            {{ __('*') }}
+          </span>
+        </FormLabel>
+      </slot>
+    </div>
+
+    <div :class="controlWrapperClasses">
+      <slot name="field" />
+
+      <HelpText class="help-text-error" v-if="showErrors && hasError">
+        {{ firstError }}
+      </HelpText>
+
+      <HelpText
+        class="help-text"
+        v-if="shouldShowHelpText"
+        v-html="field.helpText"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { HandlesValidationErrors, mapProps } from '@/mixins'
+
+export default {
+  mixins: [HandlesValidationErrors],
+
+  props: {
+    field: { type: Object, required: true },
+    fieldName: { type: String },
+    showErrors: { type: Boolean, default: true },
+    fullWidthContent: { type: Boolean, default: false },
+    labelFor: { default: null },
+    ...mapProps(['showHelpText']),
+  },
+
+  computed: {
+    fieldWrapperClasses() {
+      // prettier-ignore
+      return [
+        'space-y-2',
+        'md:flex @md/modal:flex',
+        'md:flex-row @md/modal:flex-row',
+        'md:space-y-0 @md/modal:space-y-0',
+        this.field.withLabel && !this.field.inline && (this.field.compact ? 'py-3' : 'py-5'),
+        this.field.stacked && 'md:flex-col @md/modal:flex-col md:space-y-2 @md/modal:space-y-2',
+      ]
+    },
+
+    labelClasses() {
+      // prettier-ignore
+      return [
+        'w-full',
+        this.field.compact ? '!px-3' : 'px-6',
+        !this.field.stacked && 'md:mt-2 @md/modal:mt-2',
+        this.field.stacked && !this.field.inline && 'md:px-8 @md/modal:px-8',
+        !this.field.stacked && !this.field.inline && 'md:px-8 @md/modal:px-8',
+        this.field.compact && 'md:!px-6 @md/modal:!px-6',
+        !this.field.stacked && !this.field.inline && 'md:w-1/5 @md/modal:w-1/5',
+      ]
+    },
+
+    controlWrapperClasses() {
+      // prettier-ignore
+      return [
+        'w-full space-y-2',
+        this.field.compact ? '!px-3' : 'px-6',
+        this.field.compact && 'md:!px-4 @md/modal:!px-4',
+        this.field.stacked && !this.field.inline && 'md:px-8 @md/modal:px-8',
+        !this.field.stacked && !this.field.inline && 'md:px-8 @md/modal:px-8',
+        !this.field.stacked && !this.field.inline && !this.field.fullWidth && 'md:w-3/5 @md/modal:w-3/5',
+        this.field.stacked && !this.field.inline && !this.field.fullWidth && 'md:w-3/5 @md/modal:w-3/5',
+        !this.field.stacked && !this.field.inline && this.field.fullWidth && 'md:w-4/5 @md/modal:w-4/5',
+      ]
+    },
+
+    /**
+     * Return the label that should be used for the field.
+     */
+    fieldLabel() {
+      // If the field name is purposefully an empty string, then let's show it as such
+      if (this.fieldName === '') {
+        return ''
+      }
+
+      return this.fieldName || this.field.name || this.field.singularLabel
+    },
+
+    /**
+     * Determine help text should be shown.
+     */
+    shouldShowHelpText() {
+      return this.showHelpText && this.field.helpText?.length > 0
+    },
+  },
+}
+</script>