feat(BaseFullscreenDropfile): add color prop

shuriken-ui · Feb 22, 2024 · ec8ed33 · ec8ed33
1 parent 0f0e4cc
commit ec8ed33
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/app.config.ts b/app.config.ts
@@ -66,6 +66,9 @@ export default defineAppConfig({
       rounded: 'sm',
       color: 'default',
     },
+    BaseFullscreenDropfile: {
+      color: 'primary',
+    },
     BaseHeading: {
       as: 'p',
       size: 'xl',

diff --git a/components/form/BaseFullscreenDropfile.vue b/components/form/BaseFullscreenDropfile.vue
@@ -11,6 +11,14 @@ const props = withDefaults(
      */
     icon?: string
 
+    /**
+     * Defines the color of the icon
+     *
+     * @since 3.0.0
+     * @default 'default'
+     */
+    color?: 'primary' | 'dark' | 'black'
+
     /**
      * Allows to filter files when dropped.
      */
@@ -19,6 +27,7 @@ const props = withDefaults(
   {
     label: 'Drop your files',
     icon: '',
+    color: undefined,
     filterFileDropped: () => true,
   },
 )
@@ -82,10 +91,18 @@ onBeforeUnmount(() => {
   document.documentElement.removeEventListener('dragover', onDragover)
   document.documentElement.removeEventListener('drop', onDrop)
 })
+
+const colors = {
+  primary: 'nui-dropfile-primary',
+  dark: 'nui-dropfile-dark',
+  black: 'nui-dropfile-black',
+}
+
+const color = useNuiDefaultProperty(props, 'BaseFullscreenDropfile', 'color')
 </script>
 
 <template>
-  <div class="nui-fullscreen-dropfile">
+  <div class="nui-fullscreen-dropfile" :class="color && colors[color]">
     <div v-if="isDropping" class="nui-fullscreen-dropfile-outer" />
     <div v-show="isDropping" class="nui-fullscreen-dropfile-inner">
       <Transition

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -275,6 +275,14 @@ export default defineNuxtSchema({
          */
         color: 'default',
       },
+      BaseFullscreenDropfile: {
+        /**
+         * The color of the icon.
+         *
+         * @type {'primary' | 'dark' | 'black'}
+         */
+        color: 'primary',
+      },
       BaseHeading: {
         /**
          * The tag of the heading.