feat: add upload

docs/.vitepress/config.ts

@@ -58,6 +58,7 @@ export default defineConfig({
               { text: 'Select', link: '/components/select' },
               { text: 'Slider', link: '/components/slider' },
               { text: 'Switch', link: '/components/switch' },
+              { text: 'Upload', link: '/components/upload' },
             ],
           },
           {

docs/components/alert.md

@@ -195,7 +195,7 @@ See [Card Alert](/components/card#alert).
   </template>
   <template #body:color:default>
 
-  `var(--r-common-text-color)` for `default` `type`, other theme colors for other `type`
+  `var(--r-element-color)` for `default` `type`, other theme colors for other `type`
 
   </template>
   <template #body:color:description>

docs/components/button.md

@@ -372,7 +372,7 @@ import { RButton, RSpace } from 'roughness'
   </template>
   <template #body:color:default>
 
-  `var(--r-common-text-color)` for `default` `type`, other theme colors for other `type`
+  `var(--r-element-color)` for `default` `type`, other theme colors for other `type`
 
   </template>
   <template #body:color:description>

docs/components/progress.md

@@ -161,7 +161,7 @@ import { RProgress, RSpace } from 'roughness'
   </template>
   <template #body:color:default>
 
-  `var(--r-common-text-color)` for `default` `type`, other theme colors for other `type`
+  `var(--r-element-color)` for `default` `type`, other theme colors for other `type`
 
   </template>
   <template #body:color:description>

docs/components/text.md

@@ -174,7 +174,7 @@ import { RSpace, RText } from 'roughness'
   </template>
   <template #body:color:default>
 
-  `var(--r-common-text-color)` for `default` `type`, other theme colors for other `type`.
+  `var(--r-element-color)` for `default` `type`, other theme colors for other `type`.
 
   When `type` is `default`, it will also be inherited from ancestors.
 

docs/components/toast.md

@@ -220,7 +220,7 @@ function add() {
   </template>
   <template #body:color:default>
 
-  `var(--r-common-text-color)` for `default` `type`, other theme colors for other `type`
+  `var(--r-element-color)` for `default` `type`, other theme colors for other `type`
 
   </template>
   <template #body:color:description>

docs/components/upload.md

@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import { RDetails, RSpace, RTable, RText, RUpload } from 'roughness'
+import { ref } from 'vue'
+
+let file = ref<File>()
+
+function select(value: File) {
+  file.value = value
+}
+</script>
+
+# Upload
+
+Just a moment...
+
+## Example
+
+<RDetails>
+  <template #summary>Show Code</template>
+
+```vue
+<script lang="ts" setup>
+import { RSpace, RText, RUpload } from 'roughness'
+import { ref } from 'vue'
+
+let file = ref<File>()
+
+function select(value: File) {
+  file.value = value
+}
+</script>
+
+<template>
+  <RSpace vertical align="start">
+    <RUpload @select="select">Drop or Select File</RUpload>
+    <RText>It's {{ file ? file.name : 'nothing' }}.</RText>
+  </RSpace>
+</template>
+```
+
+</RDetails>
+
+<RSpace vertical align="start">
+  <RUpload @select="select">Drop or Select File</RUpload>
+  <RText>It's {{ file ? file.name : 'nothing' }}.</RText>
+</RSpace>
+
+## Usage
+
+### Props
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'type', 'default', 'description']"
+  :rows="['block', 'filled', 'graphics-options', 'loading', 'reactions']"
+>
+  <template #body:*:name="{ row }">{{ row }}</template>
+
+  <template #body:block:type>
+
+  `boolean`
+
+  </template>
+  <template #body:block:default>
+
+  `false`
+
+  </template>
+  <template #body:block:description>
+    Whether the upload is displayed as block.
+  </template>
+
+  <template #body:filled:type>
+
+  `boolean`
+
+  </template>
+  <template #body:filled:default>
+
+  `false`
+
+  </template>
+  <template #body:filled:description>
+    Whether the upload is filled with its color.
+  </template>
+
+  <template #body:graphics-options:type>
+
+  `import('roughjs/bin/core').Options`
+
+  </template>
+  <template #body:graphics-options:description>
+
+  [Options for Rough.js](https://github.com/rough-stuff/rough/wiki#options).
+
+  See [Graphics Configuration](/components/graphics#component-prop).
+
+  </template>
+
+  <template #body:loading:type>
+
+  `boolean`
+
+  </template>
+  <template #body:loading:default>
+
+  `false`
+
+  </template>
+  <template #body:loading:description>
+    Whether the upload is loading. It will be non-interactive in loading state.
+  </template>
+
+  <template #body:reactions:type>
+
+  `string[]`
+
+  </template>
+  <template #body:reactions:default>
+
+  `['hover', 'focus', 'active']`
+
+  </template>
+  <template #body:reactions:description>
+
+  States that trigger graphics redrawing.
+
+  See [Reactions](/guide/theme#reactions).
+
+  </template>
+</RTable>
+</RSpace>
+
+### Events
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'parameters', 'description']"
+  :rows="['select']"
+>
+  <template #body:*:name="{ row }">{{ row }}</template>
+
+  <template #body:select:parameters>
+
+  `(value: File | Files[])`
+
+  </template>
+  <template #body:select:description>
+    Callback function triggered when one or more files are selected.
+  </template>
+</RTable>
+</RSpace>
+
+### Styles
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'values', 'default', 'description']"
+  :rows="['color', 'border-color', 'border-width', 'border-dash']"
+>
+  <template #body:*:name="{ row }">--r-upload-{{ row }}</template>
+
+  <template #body:color:values>
+
+  `<color>`
+
+  </template>
+  <template #body:color:default>
+
+  `var(--r-common-text-color)`
+
+  </template>
+  <template #body:color:description>
+    Color of the upload text.
+  </template>
+
+  <template #body:border-color:values>
+
+  `<color>`
+
+  </template>
+  <template #body:border-color:default>
+
+  `var(--r-upload-color)`
+
+  </template>
+  <template #body:border-color:description>
+    Color of the upload border.
+  </template>
+
+  <template #body:border-width:values>
+
+  `<length>`
+
+  </template>
+  <template #body:border-width:default>
+
+  `2px` when focused or active, `1px` else
+
+  </template>
+  <template #body:border-width:description>
+    Width of the upload border.
+  </template>
+
+  <template #body:border-dash:values>
+
+  `<length> +` or `none`
+
+  </template>
+  <template #body:border-dash:default>
+
+  `8px`
+
+  </template>
+  <template #body:border-dash:description>
+
+  List of comma and/or whitespace separated the lengths of alternating dashes and gaps of the upload border.
+
+  An odd number of values will be repeated to yield an even number of values. Thus, `8` is equivalent to `8 8`.
+
+  See [`stroke-dasharray`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray).
+
+  </template>
+</RTable>
+</RSpace>

src/components.ts

@@ -30,3 +30,4 @@ export { default as RTabs } from './tabs/index.vue'
 export { default as RText } from './text/index.vue'
 export { default as RToast } from './toast/index.vue'
 export { default as RToastProvider } from './toast/toast-provider.vue'
+export { default as RUpload } from './upload/index.vue'