add nova

nova/resources/js/components/Buttons/BasicButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <component
+    v-bind="{ ...$props, ...$attrs }"
+    :is="component"
+    ref="button"
+    class="cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600"
+    :class="{
+      'inline-flex items-center justify-center': align == 'center',
+      'inline-flex items-center justify-start': align == 'left',
+      'h-9 px-3': size == 'lg',
+      'h-8 px-3': size == 'sm',
+      'h-7 px-1 md:px-3': size == 'xs',
+    }"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'lg',
+  },
+
+  align: {
+    type: String,
+    default: 'center',
+    validator: v => ['left', 'center'].includes(v),
+  },
+
+  component: {
+    type: String,
+    default: 'button',
+  },
+})
+
+const button = ref(null)
+
+const focus = () => button.value.focus()
+
+defineExpose({ focus })
+</script>

nova/resources/js/components/Buttons/ButtonInertiaLink.vue

@@ -0,0 +1,24 @@
+<template>
+  <Link
+    v-bind="{ ...$props, ...$attrs }"
+    class="shadow rounded focus:outline-none ring-primary-200 dark:ring-gray-600 focus:ring bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-800 inline-flex items-center font-bold"
+    :class="{
+      'px-4 h-9 text-sm': size === 'md',
+      'px-3 h-7 text-xs': size === 'sm',
+    }"
+  >
+    <slot />
+  </Link>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator: val => ['sm', 'md'].includes(val),
+    },
+  },
+}
+</script>

nova/resources/js/components/Buttons/CopyButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <button
+    type="button"
+    @click="handleClick"
+    class="inline-flex items-center px-2 space-x-1 -mx-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-500 active:text-gray-600 dark:hover:bg-gray-900"
+    :class="{
+      'rounded-lg': !rounded,
+      'rounded-full': rounded,
+    }"
+  >
+    <slot />
+
+    <CopyIcon v-if="withIcon" :copied="copied" />
+  </button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import debounce from 'lodash/debounce'
+
+const copied = ref(false)
+
+const props = defineProps({
+  rounded: { type: Boolean, default: true },
+  withIcon: { type: Boolean, default: true },
+})
+
+const denouncedHandleClick = debounce(
+  () => {
+    copied.value = !copied.value
+    setTimeout(() => (copied.value = !copied.value), 2000)
+  },
+  2000,
+  { leading: true, trailing: false }
+)
+
+const handleClick = () => denouncedHandleClick()
+</script>

nova/resources/js/components/Buttons/CreateRelationButton.vue

@@ -0,0 +1,7 @@
+<template>
+  <Button variant="link" size="small" leading-icon="plus-circle" />
+</template>
+
+<script setup>
+import { Button } from 'laravel-nova-ui'
+</script>

nova/resources/js/components/Buttons/DefaultButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <BasicButton
+    v-bind="{ ...$props, ...$attrs }"
+    :component="component"
+    ref="button"
+    class="shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900"
+  >
+    <slot />
+  </BasicButton>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'lg',
+    },
+
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['left', 'center'].includes(v),
+    },
+
+    component: {
+      type: String,
+      default: 'button',
+    },
+  },
+
+  methods: {
+    focus() {
+      this.$refs.button.focus()
+    },
+  },
+}
+</script>

nova/resources/js/components/Buttons/IconButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center justify-center focus:ring focus:ring-primary-200 focus:outline-none rounded"
+    :class="buttonClasses"
+  >
+    <Icon :type="iconType" class="hover:opacity-50" v-bind="{ solid: solid }" />
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  iconType: { type: String, default: 'dots-horizontal' },
+  small: { type: Boolean },
+  medium: { type: Boolean },
+  large: { type: Boolean },
+  solid: { type: Boolean, default: true },
+})
+
+const buttonClasses = computed(() => [
+  props.small && 'w-6 h-6',
+  props.medium && 'w-8 h-8',
+  props.large && 'w-9 h-9',
+])
+</script>

nova/resources/js/components/Buttons/InertiaButton.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { Button } from 'laravel-nova-ui'
+
+const props = defineProps({
+  href: { type: String, required: true },
+  variant: { type: String, default: 'primary' },
+  icon: { type: String, default: 'primary' },
+  dusk: { type: String, default: null },
+  label: { type: String, default: null },
+})
+</script>
+
+<template>
+  <Link :href="href" :dusk="dusk">
+    <Button as="div" :variant="variant" :icon="icon" :label="label">
+      <slot />
+    </Button>
+  </Link>
+</template>

nova/resources/js/components/Buttons/InvertedButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <button
+    type="button"
+    class="space-x-1 cursor-pointer focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 focus:ring-offset-4 dark:focus:ring-offset-gray-800 rounded-lg mx-auto text-primary-500 font-bold link-default px-3 rounded-b-lg flex items-center"
+  >
+    <Icon :type="iconType" />
+    <span>
+      <slot />
+    </span>
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  iconType: { type: String, default: 'plus-circle' },
+})
+</script>

nova/resources/js/components/Buttons/LinkButton.vue

@@ -0,0 +1,29 @@
+<template>
+  <BasicButton
+    v-bind="{ ...$props, ...$attrs }"
+    :component="component"
+    class="appearance-none bg-transparent font-bold text-gray-400 hover:text-gray-300 active:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:active:text-gray-600 dark:hover:bg-gray-800"
+  >
+    <slot />
+  </BasicButton>
+</template>
+
+<script setup>
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'lg',
+  },
+
+  align: {
+    type: String,
+    default: 'center',
+    validator: v => ['left', 'center'].includes(v),
+  },
+
+  component: {
+    type: String,
+    default: 'button',
+  },
+})
+</script>

nova/resources/js/components/Buttons/OutlineButton.vue

@@ -0,0 +1,15 @@
+<template>
+  <BasicButton
+    v-bind="$attrs"
+    component="button"
+    class="focus:outline-none focus:ring rounded border-2 border-primary-300 dark:border-gray-500 hover:border-primary-500 active:border-primary-400 dark:hover:border-gray-400 dark:active:border-gray-300 bg-white dark:bg-transparent text-primary-500 dark:text-gray-400 px-3 h-9 inline-flex items-center font-bold"
+  >
+    <slot />
+  </BasicButton>
+</template>
+
+<script>
+export default {
+  //
+}
+</script>

nova/resources/js/components/Buttons/OutlineButtonInertiaLink.vue

@@ -0,0 +1,14 @@
+<template>
+  <Link
+    v-bind="{ ...$props, ...$attrs }"
+    class="focus:outline-none ring-primary-200 dark:ring-gray-600 focus:ring-2 rounded border-2 border-gray-200 dark:border-gray-500 hover:border-primary-500 active:border-primary-400 dark:hover:border-gray-400 dark:active:border-gray-300 bg-white dark:bg-transparent text-primary-500 dark:text-gray-400 px-3 h-9 inline-flex items-center font-bold"
+  >
+    <slot />
+  </Link>
+</template>
+
+<script>
+export default {
+  //
+}
+</script>

nova/resources/js/components/Buttons/RemoveButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <button
+    type="button"
+    class="rounded-full shadow bg-white dark:bg-gray-800 text-center flex items-center justify-center h-[20px] w-[21px]"
+  >
+    <Icon
+      type="x-circle"
+      :solid="true"
+      class="text-gray-800 dark:text-gray-200"
+    />
+  </button>
+</template>
+
+<script setup>
+//
+</script>

nova/resources/js/components/Buttons/ResourcePollingButton.vue

@@ -0,0 +1,51 @@
+<template>
+  <button class="px-2" @click="togglePolling" v-tooltip.click="buttonLabel">
+    <svg
+      class="w-6 h-6"
+      :class="{
+        'text-green-500': currentlyPolling,
+        'text-gray-300 dark:text-gray-500': !currentlyPolling,
+      }"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+      ></path>
+    </svg>
+  </button>
+</template>
+
+<script>
+export default {
+  emits: ['start-polling', 'stop-polling'],
+
+  props: {
+    currentlyPolling: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  methods: {
+    togglePolling() {
+      return this.currentlyPolling
+        ? this.$emit('stop-polling')
+        : this.$emit('start-polling')
+    },
+  },
+
+  computed: {
+    buttonLabel() {
+      return this.currentlyPolling
+        ? this.__('Stop Polling')
+        : this.__('Start Polling')
+    },
+  },
+}
+</script>

nova/resources/js/components/Buttons/ToolbarButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center justify-center w-8 h-8 focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 rounded-lg"
+  >
+    <slot />
+    <Icon v-if="type" solid :type="type" />
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      required: false,
+    },
+  },
+}
+</script>