-
-
-
-
+
+
-
-
-
+
+
- {{ options.title || 'Untitled' }}
-
-
-
+
+
+
+
+
+ {{ options.title || 'Untitled' }}
+
+
+
+
{{ options.message }}
@@ -104,24 +124,24 @@
-
-
+
+
+
+
-
+
@@ -132,7 +152,7 @@
import { computed } from 'vue'
import {
Dialog as HDialog,
- DialogOverlay,
+ DialogPanel,
DialogTitle,
TransitionChild,
TransitionRoot,
@@ -157,44 +177,67 @@ export default {
emits: ['update:modelValue', 'close', 'after-leave'],
components: {
HDialog,
- DialogOverlay,
+ DialogPanel,
DialogTitle,
TransitionChild,
TransitionRoot,
Button,
FeatherIcon,
},
- setup(props, { emit }) {
- let open = computed({
- get: () => props.modelValue,
- set: (val) => {
- emit('update:modelValue', val)
- if (!val) {
- emit('close')
- }
- },
- })
+ data() {
return {
- open,
+ dialogActions: [],
}
},
+ watch: {
+ 'options.actions': {
+ handler(actions) {
+ if (!actions) return
+ this.dialogActions = actions.map((action) => {
+ let _action = {
+ ...action,
+ loading: false,
+ _onClick: action.onClick,
+ onClick: () => this.handleAction(_action),
+ }
+ return _action
+ })
+ },
+ immediate: true,
+ },
+ },
methods: {
handleAction(action) {
- let close = () => (this.open = false)
- if (action.handler && typeof action.handler === 'function') {
+ if (action._onClick && typeof action._onClick === 'function') {
action.loading = true
- let result = action.handler({ close })
+ let result = action._onClick({ close: this.close })
if (result && result.then) {
- result.then(() => (action.loading = false))
+ result
+ .then(() => (action.loading = false))
+ .catch(() => (action.loading = false))
} else {
action.loading = false
}
} else {
- close()
+ this.close()
}
},
+ close() {
+ this.open = false
+ },
},
computed: {
+ open: {
+ get() {
+ return this.modelValue
+ },
+ set(val) {
+ this.$emit('update:modelValue', val)
+ if (!val) {
+ this.$emit('close')
+ }
+ },
+ },
icon() {
if (!this.options?.icon) return null
diff --git a/src/components/Divider.stories.ts b/src/components/Divider.stories.ts
new file mode 100644
index 00000000..32e7bdfc
--- /dev/null
+++ b/src/components/Divider.stories.ts
@@ -0,0 +1,110 @@
+import { Divider, Badge } from '../index'
+
+export default {
+ component: Divider,
+ tags: ['autodocs'],
+ render: (args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ components: { Divider },
+ template:
+ args.orientation == 'horizontal'
+ ? `
`
+ : `
`,
+ }),
+ argTypes: {
+ orientation: {
+ options: ['horizontal', 'vertical'],
+ control: { type: 'select' },
+ },
+ position: {
+ options: ['start', 'center', 'end'],
+ control: 'select',
+ },
+ },
+ args: {
+ orientation: 'horizontal',
+ position: 'center',
+ flexItem: false,
+ },
+}
+
+export const Horizontal = {
+ args: {
+ orientation: 'horizontal',
+ },
+}
+
+export const Vertical = {
+ args: {
+ orientation: 'vertical',
+ },
+}
+
+export const InFlexContainer = {
+ render: (args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ components: { Divider, Badge },
+ template: `
+
+ `,
+ }),
+ args: {
+ orientation: 'vertical',
+ flexItem: true,
+ },
+}
+
+export const HorizontalWithAction = {
+ args: {
+ action: {
+ label: 'Load More',
+ handler: () => {},
+ },
+ },
+}
+
+export const WithActionLoading = {
+ args: {
+ action: {
+ label: 'Loading More',
+ handler: () => {},
+ loading: true,
+ },
+ },
+}
+
+export const WithActionAtStart = {
+ args: {
+ position: 'start',
+ action: {
+ label: 'Load More',
+ handler: () => {},
+ },
+ },
+}
+
+export const WithActionAtEnd = {
+ args: {
+ position: 'end',
+ action: {
+ label: 'Load More',
+ handler: () => {},
+ },
+ },
+}
+
+export const VerticalWithAction = {
+ args: {
+ orientation: 'vertical',
+ action: {
+ label: 'Load More',
+ handler: () => {},
+ },
+ },
+}
diff --git a/src/components/Divider.vue b/src/components/Divider.vue
new file mode 100644
index 00000000..5dfdb941
--- /dev/null
+++ b/src/components/Divider.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Dropdown.stories.ts b/src/components/Dropdown.stories.ts
new file mode 100644
index 00000000..a5c4f030
--- /dev/null
+++ b/src/components/Dropdown.stories.ts
@@ -0,0 +1,73 @@
+import { Dropdown, Button, FeatherIcon } from '../index'
+
+function getStory(code) {
+ return {
+ render: (args, { argTypes }) => ({
+ props: ['style'],
+ components: { Dropdown, FeatherIcon, Button },
+ template: code,
+ }),
+ parameters: {
+ docs: {
+ source: {
+ code,
+ },
+ },
+ },
+ }
+}
+
+export default {
+ component: Dropdown,
+ tags: ['autodocs'],
+}
+
+export const Basic = {
+ ...getStory(`
`),
+}
+
+export const WithButtonProp = {
+ ...getStory(`
`),
+}
+
+export const WithCustomButtonAndGroups = {
+ ...getStory(`
+
+`),
+}
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 9e077d83..c5c03cae 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -1,6 +1,10 @@