-
-
-
-
-
- Add
-
-
- Add Prepend
-
-
- Remove
-
-
-
-
-
- {{ message.text }}
-
-
-
- `,
-});
+import VAlert from './VAlert.vue';
+import { themeColors } from '@morpheme/utils';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import Icon from '../../icon/src';
+import AlertVModelStory from './stories/AlertVModelStory.vue';
+import AlertTransitionStory from './stories/AlertTransitionStory.vue';
+import AlertCustomStory from './stories/AlertCustomStory.vue';
+import { ref } from 'vue';
+import VBtn from '../../button/src';
+import VAlertGroup from './VAlertGroup.vue';
+import VAlertTitle from './VAlertTitle.vue';
+
+export default {
+ title: 'Components/Alert',
+ component: VAlert,
+ argTypes: {
+ color: {
+ control: { type: 'select' },
+ options: themeColors,
+ },
+ },
+ args: {},
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: {
+ 'my-component': VAlert,
+ },
+ setup() {
+ return { args, themeColors };
+ },
+ template: `
+
+
+ You changes have been saved.
+
+
+`,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+ docs: {
+ source: {
+ code: `
+
+ `,
+});
+
+export const WithTitle = () => ({
+ components: { VAlert, VAlertTitle, Icon },
+ setup() {
+ return {};
+ },
+ template: `
+
+
+ Change a few things up and try submitting again.
+
+
+{{ variant }}
+
+
+ Add
+
+
+ Add Prepend
+
+
+ Remove
+
+
+
+
+
+ {{ message.text }}
+
+
+
+ `,
+});
diff --git a/packages/alert/src/VAlert.vue b/packages/ui/src/alert/src/VAlert.vue
similarity index 98%
rename from packages/alert/src/VAlert.vue
rename to packages/ui/src/alert/src/VAlert.vue
index c0ebd438f..467d272d2 100644
--- a/packages/alert/src/VAlert.vue
+++ b/packages/ui/src/alert/src/VAlert.vue
@@ -8,7 +8,7 @@ import {
onMounted,
type PropType,
} from 'vue';
-import Icon from '@morpheme/icon';
+import Icon from '../../icon/src';
import {AlertSymbol} from './api';
const props = defineProps({
diff --git a/packages/alert/src/VAlertGroup.vue b/packages/ui/src/alert/src/VAlertGroup.vue
similarity index 100%
rename from packages/alert/src/VAlertGroup.vue
rename to packages/ui/src/alert/src/VAlertGroup.vue
diff --git a/packages/alert/src/VAlertTitle.vue b/packages/ui/src/alert/src/VAlertTitle.vue
similarity index 100%
rename from packages/alert/src/VAlertTitle.vue
rename to packages/ui/src/alert/src/VAlertTitle.vue
diff --git a/packages/alert/src/api.ts b/packages/ui/src/alert/src/api.ts
similarity index 100%
rename from packages/alert/src/api.ts
rename to packages/ui/src/alert/src/api.ts
diff --git a/packages/alert/src/index.ts b/packages/ui/src/alert/src/index.ts
similarity index 98%
rename from packages/alert/src/index.ts
rename to packages/ui/src/alert/src/index.ts
index 80b6305a6..b42108e67 100644
--- a/packages/alert/src/index.ts
+++ b/packages/ui/src/alert/src/index.ts
@@ -1,4 +1,4 @@
-export {default} from './VAlert.vue';
-export {default as VAlert} from './VAlert.vue';
-export {default as VAlertGroup} from './VAlertGroup.vue';
-export {default as VAlertTitle} from './VAlertTitle.vue';
+export {default} from './VAlert.vue';
+export {default as VAlert} from './VAlert.vue';
+export {default as VAlertGroup} from './VAlertGroup.vue';
+export {default as VAlertTitle} from './VAlertTitle.vue';
diff --git a/packages/alert/src/stories/AlertCustomStory.vue b/packages/ui/src/alert/src/stories/AlertCustomStory.vue
similarity index 96%
rename from packages/alert/src/stories/AlertCustomStory.vue
rename to packages/ui/src/alert/src/stories/AlertCustomStory.vue
index a6ad63afe..d8520f999 100644
--- a/packages/alert/src/stories/AlertCustomStory.vue
+++ b/packages/ui/src/alert/src/stories/AlertCustomStory.vue
@@ -1,22 +1,22 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
- Dashboard
-
-
- Overview of your account
-
-
-
-
-
-
- `,
-});
-
-export const Default: Story<{}> = (args) => ({
- setup() {
- const breakpoints = useBreakpoints(breakpointsTailwind);
- const isMobile = breakpoints.smaller('sm'); // only smaller than lg
- const isAsideOpen = ref(true);
-
- watchEffect(() => {
- isAsideOpen.value = !isMobile.value;
- });
-
- return {args, isMobile, isAsideOpen};
- },
- components: {
- VAppShell,
- VAppBar,
- VNavDrawer,
- VBtn,
- VText,
- NavDrawerContent,
- AppHeader,
- MainContent,
- },
- template: `
-
-
-
- D
-
- Digits
-
-
-
- A
-
- Acme
-
-
-
- T
-
- Tech
-
-
-
-
-
-
- Threads
- Direct Messages
- Mentions and Reactions
- Drafts and sent
- Saved items
- Connect
- More
-
-
- Channels
-
- Channel {{ i }}
-
-
-
- Direct Messsages
-
- User {{ i }}
-
-
-
-
- Apps
-
-
- App {{ i }}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ Dashboard
+
+
+ Overview of your account
+
+
+
+
+
+
+ `,
+});
+
+export const Default: Story<{}> = (args) => ({
+ setup() {
+ const breakpoints = useBreakpoints(breakpointsTailwind);
+ const isMobile = breakpoints.smaller('sm'); // only smaller than lg
+ const isAsideOpen = ref(true);
+
+ watchEffect(() => {
+ isAsideOpen.value = !isMobile.value;
+ });
+
+ return { args, isMobile, isAsideOpen };
+ },
+ components: {
+ VAppShell,
+ VAppBar,
+ VNavDrawer,
+ VBtn,
+ VText,
+ NavDrawerContent,
+ AppHeader,
+ MainContent,
+ },
+ template: `
+
+
+
+ D
+
+ Digits
+
+
+
+ A
+
+ Acme
+
+
+
+ T
+
+ Tech
+
+
+
+
+
+
+ Threads
+ Direct Messages
+ Mentions and Reactions
+ Drafts and sent
+ Saved items
+ Connect
+ More
+
+
+ Channels
+
+ Channel {{ i }}
+
+
+
+ Direct Messsages
+
+ User {{ i }}
+
+
+
+
+ Apps
+
+
+ App {{ i }}
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/packages/app-shell/src/VMain.stories.ts b/packages/ui/src/app-shell/src/VMain.stories.ts
similarity index 94%
rename from packages/app-shell/src/VMain.stories.ts
rename to packages/ui/src/app-shell/src/VMain.stories.ts
index 0d6f908f4..49d5864a2 100644
--- a/packages/app-shell/src/VMain.stories.ts
+++ b/packages/ui/src/app-shell/src/VMain.stories.ts
@@ -1,38 +1,38 @@
-import type {StoryFn, Meta} from '@storybook/vue3';
-import VMain from './VMain.vue';
-
-export default {
- title: 'Components/Main',
- component: VMain,
-} as Meta;
-
-export const Default: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VMain,
- },
- template: `
-
+
+
+
+
-
- Main content here
-
-
- `,
-});
-
-export const Fluid = Default.bind({});
-Fluid.args = {
- fluid: true,
-};
-
-export const Padded = Default.bind({});
-Padded.args = {
- padded: true,
-};
-
-export const Centered = Default.bind({});
-Centered.args = {
- centered: true,
-};
+import type {StoryFn, Meta} from '@storybook/vue3';
+import VMain from './VMain.vue';
+
+export default {
+ title: 'Components/Main',
+ component: VMain,
+} as Meta;
+
+export const Default: StoryFn = (args) => ({
+ setup() {
+ return {args};
+ },
+ components: {
+ VMain,
+ },
+ template: `
+
+
+ Main content here
+
+
+ `,
+});
+
+export const Fluid = Default.bind({});
+Fluid.args = {
+ fluid: true,
+};
+
+export const Padded = Default.bind({});
+Padded.args = {
+ padded: true,
+};
+
+export const Centered = Default.bind({});
+Centered.args = {
+ centered: true,
+};
diff --git a/packages/app-shell/src/VMain.vue b/packages/ui/src/app-shell/src/VMain.vue
similarity index 100%
rename from packages/app-shell/src/VMain.vue
rename to packages/ui/src/app-shell/src/VMain.vue
diff --git a/packages/app-shell/src/index.ts b/packages/ui/src/app-shell/src/index.ts
similarity index 97%
rename from packages/app-shell/src/index.ts
rename to packages/ui/src/app-shell/src/index.ts
index c2bd331bd..a69617ac1 100644
--- a/packages/app-shell/src/index.ts
+++ b/packages/ui/src/app-shell/src/index.ts
@@ -1,3 +1,3 @@
-export {default as VAppShell} from './VAppShell.vue';
-export {default as VMain} from './VMain.vue';
-export {default} from './VAppShell.vue';
+export {default as VAppShell} from './VAppShell.vue';
+export {default as VMain} from './VMain.vue';
+export {default} from './VAppShell.vue';
diff --git a/packages/app-shell/src/stories/Changelog.stories.mdx b/packages/ui/src/app-shell/src/stories/Changelog.stories.mdx
similarity index 100%
rename from packages/app-shell/src/stories/Changelog.stories.mdx
rename to packages/ui/src/app-shell/src/stories/Changelog.stories.mdx
diff --git a/packages/app-shell/src/stories/Readme.stories.mdx b/packages/ui/src/app-shell/src/stories/Readme.stories.mdx
similarity index 100%
rename from packages/app-shell/src/stories/Readme.stories.mdx
rename to packages/ui/src/app-shell/src/stories/Readme.stories.mdx
diff --git a/packages/app-shell/src/vue.d.ts b/packages/ui/src/app-shell/src/vue.d.ts
similarity index 100%
rename from packages/app-shell/src/vue.d.ts
rename to packages/ui/src/app-shell/src/vue.d.ts
diff --git a/packages/app-shell/tailwind.config.js b/packages/ui/src/app-shell/tailwind.config.js
similarity index 100%
rename from packages/app-shell/tailwind.config.js
rename to packages/ui/src/app-shell/tailwind.config.js
diff --git a/packages/app-shell/tsconfig.json b/packages/ui/src/app-shell/tsconfig.json
similarity index 100%
rename from packages/app-shell/tsconfig.json
rename to packages/ui/src/app-shell/tsconfig.json
diff --git a/packages/app-shell/vite.config.js b/packages/ui/src/app-shell/vite.config.js
similarity index 96%
rename from packages/app-shell/vite.config.js
rename to packages/ui/src/app-shell/vite.config.js
index 914579b70..9097275ab 100644
--- a/packages/app-shell/vite.config.js
+++ b/packages/ui/src/app-shell/vite.config.js
@@ -1,34 +1,34 @@
-import {defineConfig} from 'vite';
-import vue from '@vitejs/plugin-vue';
-import {resolve} from 'path';
-
-// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [vue()],
- esbuild: {
- exclude: ['./src/**/**.stories.ts'],
- },
- build: {
- target: 'esnext',
- lib: {
- entry: resolve(__dirname, 'src/index.ts'),
- name: 'VAppShell',
- formats: ['es', 'cjs', 'iife', 'umd'],
- },
- rollupOptions: {
- // make sure to externalize deps that shouldn't be bundled
- // into your library
- external: ['vue', '@morpheme/utils', '@morpheme/tooltip', '@vueuse/core'],
- output: {
- // Provide global variables to use in the UMD build
- // for externalized deps
- globals: {
- vue: 'Vue',
- },
- },
- resolve: {
- dedupe: 'vue',
- },
- },
- },
-});
+import {defineConfig} from 'vite';
+import vue from '@vitejs/plugin-vue';
+import {resolve} from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+ esbuild: {
+ exclude: ['./src/**/**.stories.ts'],
+ },
+ build: {
+ target: 'esnext',
+ lib: {
+ entry: resolve(__dirname, 'src/index.ts'),
+ name: 'VAppShell',
+ formats: ['es', 'cjs', 'iife', 'umd'],
+ },
+ rollupOptions: {
+ // make sure to externalize deps that shouldn't be bundled
+ // into your library
+ external: ['vue', '@morpheme/utils', '@morpheme/tooltip', '@vueuse/core'],
+ output: {
+ // Provide global variables to use in the UMD build
+ // for externalized deps
+ globals: {
+ vue: 'Vue',
+ },
+ },
+ resolve: {
+ dedupe: 'vue',
+ },
+ },
+ },
+});
diff --git a/packages/autocomplete/CHANGELOG.md b/packages/ui/src/autocomplete/CHANGELOG.md
similarity index 100%
rename from packages/autocomplete/CHANGELOG.md
rename to packages/ui/src/autocomplete/CHANGELOG.md
diff --git a/packages/autocomplete/README.md b/packages/ui/src/autocomplete/README.md
similarity index 100%
rename from packages/autocomplete/README.md
rename to packages/ui/src/autocomplete/README.md
diff --git a/packages/autocomplete/package.json b/packages/ui/src/autocomplete/package.json
similarity index 100%
rename from packages/autocomplete/package.json
rename to packages/ui/src/autocomplete/package.json
diff --git a/packages/autocomplete/postcss.config.js b/packages/ui/src/autocomplete/postcss.config.js
similarity index 100%
rename from packages/autocomplete/postcss.config.js
rename to packages/ui/src/autocomplete/postcss.config.js
diff --git a/packages/autocomplete/src/Autocomplete.stories.ts b/packages/ui/src/autocomplete/src/Autocomplete.stories.ts
similarity index 87%
rename from packages/autocomplete/src/Autocomplete.stories.ts
rename to packages/ui/src/autocomplete/src/Autocomplete.stories.ts
index 47bc252ab..bcfe85222 100644
--- a/packages/autocomplete/src/Autocomplete.stories.ts
+++ b/packages/ui/src/autocomplete/src/Autocomplete.stories.ts
@@ -1,233 +1,233 @@
-import type {Story, Meta} from '@storybook/vue3';
-import Autocomplete from './Autocomplete.vue';
-import {ref} from 'vue';
-import {ListboxButton} from '@headlessui/vue';
-import {Field, useForm} from 'vee-validate';
-import {array, object} from 'yup';
-import {VBtn} from '@morpheme/button';
-
-const items = [...Array(10)].map((_, index) => ({
- value: index + 1,
- text: `Option ${index + 1}`,
-}));
-
-export default {
- title: 'Experimental/Autocomplete',
- component: Autocomplete,
- args: {
- items,
- },
-} as Meta;
-
-const Template: StoryModel Value: {{ value }}
- `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Multiple = Template.bind({});
-Multiple.args = {
- multiple: true,
-};
-
-export const Label = Template.bind({});
-Label.args = {
- label: 'Label',
-};
-
-export const EmptyText = Template.bind({});
-EmptyText.args = {
- emptyText: 'No results found.',
-};
-
-export const Hint = Template.bind({});
-Hint.args = {
- hint: 'This is a hint',
-};
-
-export const Error = Template.bind({});
-Error.args = {
- error: true,
- errorMessage: 'This is an error message.',
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
- disabled: true,
-};
-
-export const Shadow = Template.bind({});
-Shadow.args = {
- shadow: true,
-};
-
-export const Clearable = Template.bind({});
-Clearable.args = {
- clearable: true,
-};
-
-export const SelectionItemProps = Template.bind({});
-SelectionItemProps.args = {
- selectionItemProps: {
- outlined: true,
- },
- multiple: true,
-};
-
-export const Slots: Story
-
-
- {{ item.text }}
- ✅
-
- {{ selected.length }} Selected
-
-
-
- {{ item.text }}
-
-
-
-
-
- `,
-});
-
-export const Validation: Story<{}> = (args) => ({
- components: {VBtn, Autocomplete, Field},
- setup() {
- const schema = object({
- gender: object().required().nullable().label('Gender'),
- genre: array().required().nullable().label('Genre'),
- });
-
- const {handleSubmit, resetForm, values, errors} = useForm({
- validationSchema: schema,
- });
-
- const onSubmit = handleSubmit((values) => {
- alert(JSON.stringify(values));
- });
-
- const genders = ref([
- {
- text: 'Male',
- value: 'male',
- },
- {
- text: 'Female',
- value: 'female',
- },
- ]);
-
- const genres = ref([
- {
- text: 'Pop',
- value: 'pop',
- },
- {
- text: 'Rock',
- value: 'rock',
- },
- {
- text: 'Jazz',
- value: 'jazz',
- },
- {
- text: 'Hip Hop',
- value: 'hiphop',
- },
- ]);
-
- return {onSubmit, resetForm, values, genders, genres, args, errors};
- },
- template: `
-
- `,
-});
+import type { Story, Meta } from '@storybook/vue3';
+import Autocomplete from './Autocomplete.vue';
+import { ref } from 'vue';
+import { ListboxButton } from '@headlessui/vue';
+import { Field, useForm } from 'vee-validate';
+import { array, object } from 'yup';
+import { VBtn } from '../../button/src';
+
+const items = [...Array(10)].map((_, index) => ({
+ value: index + 1,
+ text: `Option ${index + 1}`,
+}));
+
+export default {
+ title: 'Experimental/Autocomplete',
+ component: Autocomplete,
+ args: {
+ items,
+ },
+} as Meta;
+
+const Template: StoryModel Value: {{ value }}
+ `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+ multiple: true,
+};
+
+export const Label = Template.bind({});
+Label.args = {
+ label: 'Label',
+};
+
+export const EmptyText = Template.bind({});
+EmptyText.args = {
+ emptyText: 'No results found.',
+};
+
+export const Hint = Template.bind({});
+Hint.args = {
+ hint: 'This is a hint',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+ error: true,
+ errorMessage: 'This is an error message.',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ disabled: true,
+};
+
+export const Shadow = Template.bind({});
+Shadow.args = {
+ shadow: true,
+};
+
+export const Clearable = Template.bind({});
+Clearable.args = {
+ clearable: true,
+};
+
+export const SelectionItemProps = Template.bind({});
+SelectionItemProps.args = {
+ selectionItemProps: {
+ outlined: true,
+ },
+ multiple: true,
+};
+
+export const Slots: Story
+
+
+ {{ item.text }}
+ ✅
+
+ {{ selected.length }} Selected
+
+
+
+ {{ item.text }}
+
+
+
+
+
+ `,
+});
+
+export const Validation: Story<{}> = (args) => ({
+ components: { VBtn, Autocomplete, Field },
+ setup() {
+ const schema = object({
+ gender: object().required().nullable().label('Gender'),
+ genre: array().required().nullable().label('Genre'),
+ });
+
+ const { handleSubmit, resetForm, values, errors } = useForm({
+ validationSchema: schema,
+ });
+
+ const onSubmit = handleSubmit((values) => {
+ alert(JSON.stringify(values));
+ });
+
+ const genders = ref([
+ {
+ text: 'Male',
+ value: 'male',
+ },
+ {
+ text: 'Female',
+ value: 'female',
+ },
+ ]);
+
+ const genres = ref([
+ {
+ text: 'Pop',
+ value: 'pop',
+ },
+ {
+ text: 'Rock',
+ value: 'rock',
+ },
+ {
+ text: 'Jazz',
+ value: 'jazz',
+ },
+ {
+ text: 'Hip Hop',
+ value: 'hiphop',
+ },
+ ]);
+
+ return { onSubmit, resetForm, values, genders, genres, args, errors };
+ },
+ template: `
+
+ `,
+});
diff --git a/packages/autocomplete/src/Autocomplete.vue b/packages/ui/src/autocomplete/src/Autocomplete.vue
similarity index 98%
rename from packages/autocomplete/src/Autocomplete.vue
rename to packages/ui/src/autocomplete/src/Autocomplete.vue
index 02e1b56f2..7db1ec66e 100644
--- a/packages/autocomplete/src/Autocomplete.vue
+++ b/packages/ui/src/autocomplete/src/Autocomplete.vue
@@ -7,9 +7,9 @@ import {
ComboboxLabel,
ComboboxInput,
} from '@headlessui/vue';
-import VIcon from '@morpheme/icon';
+import VIcon from '../../icon/src';
import {computed, ref, watch} from 'vue';
-import VBadge from '@morpheme/badge';
+import VBadge from '../../badge/src';
type T = Record
-
-
-
-
-
- {{ item[displayText] }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ noDataText }}
-
-
-
-
- {{ errorMessage }}
-
-
+
+
+
+
+
+ {{ item[displayText] }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ noDataText }}
+
+
+
+
+ {{ errorMessage }}
+
+
-
- `,
-});
-
-export const Variants = Template.bind({});
-Variants.args = {};
-Variants.parameters = {
- docs: {
- source: {
- code: `
-
-
-
-
-
- `,
-});
-Sizes.parameters = {
- docs: {
- source: {
- code: `
-
- `,
-});
-Shape.parameters = {
- docs: {
- source: {
- code: `
-
- `,
-});
-CustomSizes.parameters = {
- docs: {
- source: {
- code: `
-
-
- W
- AP
- +5
-
-
- W
- AP
- +5
-
-
- W
- AP
- +5
-
-
- W
- AP
- +5
-
-
- W
- AP
- +5
-
-
- W
- AP
- +5
-
-
- W
- AP
- +5
-
-
- `,
-});
-
-export const CalloutExample = () => ({
- components: {Avatar, VIcon},
- setup() {
- return {
- avatar1,
- };
- },
- template: `
-
- `,
-});
-
-export const Indicator = () => ({
- components: {Avatar, VIcon},
- setup() {
- return {
- avatar1,
- };
- },
- template: `
-
-
- `,
-});
+import Avatar from './Avatar.vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import {
+ defaultColors as colors,
+ defaultSizes as sizes,
+} from '@morpheme/theme/defaultTheme';
+
+import AvatarGroup from './AvatarGroup.vue';
+import VIcon from '../../icon/src';
+
+const avatar1 =
+ 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80';
+const avatar2 =
+ 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80';
+
+export default {
+ title: 'Components/Avatar',
+ component: Avatar,
+ subcomponents: { AvatarGroup },
+} as Meta
+
+ `,
+});
+
+export const Variants = Template.bind({});
+Variants.args = {};
+Variants.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+
+
+
+ `,
+});
+Sizes.parameters = {
+ docs: {
+ source: {
+ code: `
+
+ `,
+});
+Shape.parameters = {
+ docs: {
+ source: {
+ code: `
+
+ `,
+});
+CustomSizes.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ W
+ AP
+ +5
+
+
+ W
+ AP
+ +5
+
+
+ W
+ AP
+ +5
+
+
+ W
+ AP
+ +5
+
+
+ W
+ AP
+ +5
+
+
+ W
+ AP
+ +5
+
+
+ W
+ AP
+ +5
+
+
+ `,
+});
+
+export const CalloutExample = () => ({
+ components: { Avatar, VIcon },
+ setup() {
+ return {
+ avatar1,
+ };
+ },
+ template: `
+
+ `,
+});
+
+export const Indicator = () => ({
+ components: { Avatar, VIcon },
+ setup() {
+ return {
+ avatar1,
+ };
+ },
+ template: `
+
+
+ `,
+});
diff --git a/packages/avatar/src/Avatar.vue b/packages/ui/src/avatar/src/Avatar.vue
similarity index 94%
rename from packages/avatar/src/Avatar.vue
rename to packages/ui/src/avatar/src/Avatar.vue
index 8231378df..c8ba2e5d1 100644
--- a/packages/avatar/src/Avatar.vue
+++ b/packages/ui/src/avatar/src/Avatar.vue
@@ -1,114 +1,114 @@
-
-
-
-
- ![]()
-
-
-
-
+
+
+
+
-
- {{ initial }}
-
-
-
- 
-
-
-
+ ![]()
+
+
+
+
diff --git a/packages/avatar/src/AvatarGroup.test.ts b/packages/ui/src/avatar/src/AvatarGroup.test.ts
similarity index 100%
rename from packages/avatar/src/AvatarGroup.test.ts
rename to packages/ui/src/avatar/src/AvatarGroup.test.ts
diff --git a/packages/avatar/src/AvatarGroup.vue b/packages/ui/src/avatar/src/AvatarGroup.vue
similarity index 100%
rename from packages/avatar/src/AvatarGroup.vue
rename to packages/ui/src/avatar/src/AvatarGroup.vue
diff --git a/packages/avatar/src/index.ts b/packages/ui/src/avatar/src/index.ts
similarity index 100%
rename from packages/avatar/src/index.ts
rename to packages/ui/src/avatar/src/index.ts
diff --git a/packages/avatar/src/stories/Changelog.stories.mdx b/packages/ui/src/avatar/src/stories/Changelog.stories.mdx
similarity index 100%
rename from packages/avatar/src/stories/Changelog.stories.mdx
rename to packages/ui/src/avatar/src/stories/Changelog.stories.mdx
diff --git a/packages/avatar/src/stories/Readme.stories.mdx b/packages/ui/src/avatar/src/stories/Readme.stories.mdx
similarity index 100%
rename from packages/avatar/src/stories/Readme.stories.mdx
rename to packages/ui/src/avatar/src/stories/Readme.stories.mdx
diff --git a/packages/avatar/src/verified.svg b/packages/ui/src/avatar/src/verified.svg
similarity index 100%
rename from packages/avatar/src/verified.svg
rename to packages/ui/src/avatar/src/verified.svg
diff --git a/packages/avatar/tailwind.config.js b/packages/ui/src/avatar/tailwind.config.js
similarity index 100%
rename from packages/avatar/tailwind.config.js
rename to packages/ui/src/avatar/tailwind.config.js
diff --git a/packages/avatar/tsconfig.json b/packages/ui/src/avatar/tsconfig.json
similarity index 100%
rename from packages/avatar/tsconfig.json
rename to packages/ui/src/avatar/tsconfig.json
diff --git a/packages/avatar/vite.config.js b/packages/ui/src/avatar/vite.config.js
similarity index 100%
rename from packages/avatar/vite.config.js
rename to packages/ui/src/avatar/vite.config.js
diff --git a/packages/badge/CHANGELOG.md b/packages/ui/src/badge/CHANGELOG.md
similarity index 100%
rename from packages/badge/CHANGELOG.md
rename to packages/ui/src/badge/CHANGELOG.md
diff --git a/packages/badge/README.md b/packages/ui/src/badge/README.md
similarity index 100%
rename from packages/badge/README.md
rename to packages/ui/src/badge/README.md
diff --git a/packages/badge/package.json b/packages/ui/src/badge/package.json
similarity index 100%
rename from packages/badge/package.json
rename to packages/ui/src/badge/package.json
diff --git a/packages/badge/postcss.config.js b/packages/ui/src/badge/postcss.config.js
similarity index 100%
rename from packages/badge/postcss.config.js
rename to packages/ui/src/badge/postcss.config.js
diff --git a/packages/badge/src/Changelog.stories.mdx b/packages/ui/src/badge/src/Changelog.stories.mdx
similarity index 100%
rename from packages/badge/src/Changelog.stories.mdx
rename to packages/ui/src/badge/src/Changelog.stories.mdx
diff --git a/packages/badge/src/Readme.stories.mdx b/packages/ui/src/badge/src/Readme.stories.mdx
similarity index 100%
rename from packages/badge/src/Readme.stories.mdx
rename to packages/ui/src/badge/src/Readme.stories.mdx
diff --git a/packages/badge/src/VBadge.dark.scss b/packages/ui/src/badge/src/VBadge.dark.scss
similarity index 100%
rename from packages/badge/src/VBadge.dark.scss
rename to packages/ui/src/badge/src/VBadge.dark.scss
diff --git a/packages/badge/src/VBadge.scss b/packages/ui/src/badge/src/VBadge.scss
similarity index 100%
rename from packages/badge/src/VBadge.scss
rename to packages/ui/src/badge/src/VBadge.scss
diff --git a/packages/badge/src/VBadge.spec.ts b/packages/ui/src/badge/src/VBadge.spec.ts
similarity index 100%
rename from packages/badge/src/VBadge.spec.ts
rename to packages/ui/src/badge/src/VBadge.spec.ts
diff --git a/packages/badge/src/VBadge.stories.ts b/packages/ui/src/badge/src/VBadge.stories.ts
similarity index 92%
rename from packages/badge/src/VBadge.stories.ts
rename to packages/ui/src/badge/src/VBadge.stories.ts
index 23f456133..3ad88c5ca 100644
--- a/packages/badge/src/VBadge.stories.ts
+++ b/packages/ui/src/badge/src/VBadge.stories.ts
@@ -1,11 +1,11 @@
-import { VBtn } from '@morpheme/button';
+import { VBtn } from '../../button/src';
import VBadge from './VBadge.vue';
-import type {VBadgeProps} from './types';
-import type {Story, Meta} from '@storybook/vue3';
-import {defaultRounded, defaultColors} from '@morpheme/theme/defaultTheme';
-import {List as VList, ListItem as VListItem} from '@morpheme/list'
+import type { VBadgeProps } from './types';
+import type { Story, Meta } from '@storybook/vue3';
+import { defaultRounded, defaultColors } from '@morpheme/theme/defaultTheme';
+import { List as VList, ListItem as VListItem } from '../../list/src'
import VBadgeGroup from './VBadgeGroup.vue';
-import {VBadgeContent} from './badge-content';
+import { VBadgeContent } from './badge-content';
const colors = [
...defaultColors,
@@ -29,7 +29,7 @@ const Template: Story
+
+ {{ initial }}
+
+
+
+
+
+
+
@@ -68,7 +68,7 @@ export const Rounded: Story = (args) => ({
VBadge,
},
setup() {
- return {args, defaultRounded};
+ return { args, defaultRounded };
},
template: `
@@ -90,7 +90,7 @@ export const Dismissable: Story = (args) => ({
VBadge,
},
setup() {
- return {args};
+ return { args };
},
template: `
@@ -123,7 +123,7 @@ export const Sizes: Story = (args) => ({
VBadge,
},
setup() {
- return {args, defaultRounded};
+ return { args, defaultRounded };
},
template: `
@@ -189,7 +189,7 @@ const SingleTemplate: Story = (args) => ({
VBadge,
},
setup() {
- return {args};
+ return { args };
},
template: `{{ args.label || 'Text' }} `,
});
@@ -213,7 +213,7 @@ export const Dot: Story = (args) => ({
VBtn
},
setup() {
- return {args};
+ return { args };
},
template: `
= (args) => ({
VListItem,
},
setup() {
- return {args};
+ return { args };
},
template: `
@@ -293,7 +293,7 @@ export const InList: Story = (args) => ({
});
export const DarkMode = () => ({
- components: {VBadge},
+ components: { VBadge },
setup() {
return {
colors,
@@ -328,7 +328,7 @@ export const Group: Story = (args) => ({
VBtn
},
setup() {
- return {args, colors};
+ return { args, colors };
},
template: `
-
-
-
+
+
+
+
+
+
+
diff --git a/packages/banner/src/VBannerText.vue b/packages/ui/src/banner/src/VBannerText.vue
similarity index 100%
rename from packages/banner/src/VBannerText.vue
rename to packages/ui/src/banner/src/VBannerText.vue
diff --git a/packages/banner/src/index.ts b/packages/ui/src/banner/src/index.ts
similarity index 100%
rename from packages/banner/src/index.ts
rename to packages/ui/src/banner/src/index.ts
diff --git a/packages/banner/src/stories/Changelog.stories.mdx b/packages/ui/src/banner/src/stories/Changelog.stories.mdx
similarity index 100%
rename from packages/banner/src/stories/Changelog.stories.mdx
rename to packages/ui/src/banner/src/stories/Changelog.stories.mdx
diff --git a/packages/banner/src/stories/Readme.stories.mdx b/packages/ui/src/banner/src/stories/Readme.stories.mdx
similarity index 100%
rename from packages/banner/src/stories/Readme.stories.mdx
rename to packages/ui/src/banner/src/stories/Readme.stories.mdx
diff --git a/packages/banner/src/symbol.ts b/packages/ui/src/banner/src/symbol.ts
similarity index 100%
rename from packages/banner/src/symbol.ts
rename to packages/ui/src/banner/src/symbol.ts
diff --git a/packages/banner/src/vue.d.ts b/packages/ui/src/banner/src/vue.d.ts
similarity index 100%
rename from packages/banner/src/vue.d.ts
rename to packages/ui/src/banner/src/vue.d.ts
diff --git a/packages/banner/tailwind.config.js b/packages/ui/src/banner/tailwind.config.js
similarity index 100%
rename from packages/banner/tailwind.config.js
rename to packages/ui/src/banner/tailwind.config.js
diff --git a/packages/banner/tsconfig.json b/packages/ui/src/banner/tsconfig.json
similarity index 100%
rename from packages/banner/tsconfig.json
rename to packages/ui/src/banner/tsconfig.json
diff --git a/packages/banner/vite.config.js b/packages/ui/src/banner/vite.config.js
similarity index 100%
rename from packages/banner/vite.config.js
rename to packages/ui/src/banner/vite.config.js
diff --git a/packages/bottom-navigation/CHANGELOG.md b/packages/ui/src/bottom-navigation/CHANGELOG.md
similarity index 100%
rename from packages/bottom-navigation/CHANGELOG.md
rename to packages/ui/src/bottom-navigation/CHANGELOG.md
diff --git a/packages/bottom-navigation/README.md b/packages/ui/src/bottom-navigation/README.md
similarity index 94%
rename from packages/bottom-navigation/README.md
rename to packages/ui/src/bottom-navigation/README.md
index f17976e04..a353f853e 100644
--- a/packages/bottom-navigation/README.md
+++ b/packages/ui/src/bottom-navigation/README.md
@@ -1,59 +1,59 @@
-# Morpheme Bottom Navigation
-
-Morpheme Bottom Navigation Component.
-
-## Installation
-
-npm
-
-```
-npm i @morpheme/bottom-navigation
-```
-
-yarn
-
-```
-yarn add @morpheme/bottom-navigation
-```
-
-pnpm
-
-```
-pnpm i @morpheme/bottom-navigation
-```
-
-## Usage
-
-```vue
-
-
-
-
-
- Home
-
-
- Recents
-
-
- Favorites
-
-
- Nearby
-
-
- Account
-
-
-
-```
-
-## Documentation
-
-Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-bottom-navigation--default).
-
-## License
-
-MIT
+# Morpheme Bottom Navigation
+
+Morpheme Bottom Navigation Component.
+
+## Installation
+
+npm
+
+```
+npm i @morpheme/bottom-navigation
+```
+
+yarn
+
+```
+yarn add @morpheme/bottom-navigation
+```
+
+pnpm
+
+```
+pnpm i @morpheme/bottom-navigation
+```
+
+## Usage
+
+```vue
+
+
+
+
+
+ Home
+
+
+ Recents
+
+
+ Favorites
+
+
+ Nearby
+
+
+ Account
+
+
+
+```
+
+## Documentation
+
+Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-bottom-navigation--default).
+
+## License
+
+MIT
diff --git a/packages/bottom-navigation/package.json b/packages/ui/src/bottom-navigation/package.json
similarity index 100%
rename from packages/bottom-navigation/package.json
rename to packages/ui/src/bottom-navigation/package.json
diff --git a/packages/breadcrumbs/postcss.config.js b/packages/ui/src/bottom-navigation/postcss.config.js
similarity index 100%
rename from packages/breadcrumbs/postcss.config.js
rename to packages/ui/src/bottom-navigation/postcss.config.js
diff --git a/packages/bottom-navigation/src/VBottomNavigation.stories.ts b/packages/ui/src/bottom-navigation/src/VBottomNavigation.stories.ts
similarity index 90%
rename from packages/bottom-navigation/src/VBottomNavigation.stories.ts
rename to packages/ui/src/bottom-navigation/src/VBottomNavigation.stories.ts
index 34b3fb56c..de9a23aff 100644
--- a/packages/bottom-navigation/src/VBottomNavigation.stories.ts
+++ b/packages/ui/src/bottom-navigation/src/VBottomNavigation.stories.ts
@@ -1,290 +1,290 @@
-import {VBtn} from '@morpheme/button';
-import {defaultColors} from '@morpheme/theme/defaultTheme';
-import type {StoryFn, Meta} from '@storybook/vue3';
-import VBottomNavigation from './VBottomNavigation.vue';
-import VBottomNavigationItem from './VBottomNavigationItem.vue';
-import {ref} from 'vue';
-
-export default {
- title: 'Components/BottomNavigation',
- component: VBottomNavigation,
-} as Meta;
-
-export const Default: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- },
- template: `
-
-
- Home
-
-
- Recents
-
-
- Favorites
-
-
- Nearby
-
-
- Account
-
-
- `,
-});
-
-export const DefaultActive = Default.bind({});
-DefaultActive.args = {
- defaultActive: 1,
-};
-
-export const Grow = Default.bind({});
-Grow.args = {
- grow: true,
-};
-
-export const HideSlider = Default.bind({});
-HideSlider.args = {
- hideSlider: true,
-};
-
-export const IconOnly: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- },
- template: `
-
-
- `,
-});
-
-export const WithVueRouter: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- },
- template: `
-
-
- Home
-
-
- Recents
-
-
- Favorites
-
-
- Nearby
-
-
- Account
-
-
- `,
-});
-
-export const Colors: StoryFn = (args) => ({
- setup() {
- const colors = defaultColors;
- return {args, colors};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- },
- template: `
-
-
- Home
-
-
- Recents
-
-
- Favorites
-
-
- Nearby
-
-
- Account
-
-
- `,
-});
-
-export const Variants: StoryFn = (args) => ({
- setup() {
- const variants = ['filled', 'bordered', 'filled-bordered'];
- return {args, variants};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- },
- template: `
-
-
- Home
-
-
- Recents
-
-
- Favorites
-
-
- Nearby
-
-
- Account
-
-
- `,
-});
-
-export const ToggleNavigation: StoryFn = (args) => ({
- setup() {
- const isOpen = ref(true);
- return {args, isOpen};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- VBtn,
- },
- template: `
- Toggle Navigation
-
-
- Home
-
-
- Recents
-
-
- Favorites
-
-
- Nearby
-
-
- Account
-
-
- `,
-});
-
-export const WithButton: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- VBtn,
- },
- template: `
-
-
- `,
-});
-
-export const WithFabButton: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- VBtn,
- },
- template: `
-
-
- `,
-});
-
-export const DarkMode: StoryFn = (args) => ({
- setup() {
- return {args, colors: defaultColors};
- },
- components: {
- VBottomNavigation,
- VBottomNavigationItem,
- },
- template: `
-
+
+ Home
+
+
+ Recents
+
+
+ Favorites
+
+
+ Nearby
+
+
+ Account
+
+
+ `,
+});
+
+export const DefaultActive = Default.bind({});
+DefaultActive.args = {
+ defaultActive: 1,
+};
+
+export const Grow = Default.bind({});
+Grow.args = {
+ grow: true,
+};
+
+export const HideSlider = Default.bind({});
+HideSlider.args = {
+ hideSlider: true,
+};
+
+export const IconOnly: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ },
+ template: `
+
+
+ `,
+});
+
+export const WithVueRouter: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ },
+ template: `
+
+
+ Home
+
+
+ Recents
+
+
+ Favorites
+
+
+ Nearby
+
+
+ Account
+
+
+ `,
+});
+
+export const Colors: StoryFn = (args) => ({
+ setup() {
+ const colors = defaultColors;
+ return { args, colors };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ },
+ template: `
+
+
+ Home
+
+
+ Recents
+
+
+ Favorites
+
+
+ Nearby
+
+
+ Account
+
+
+ `,
+});
+
+export const Variants: StoryFn = (args) => ({
+ setup() {
+ const variants = ['filled', 'bordered', 'filled-bordered'];
+ return { args, variants };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ },
+ template: `
+
+
+ Home
+
+
+ Recents
+
+
+ Favorites
+
+
+ Nearby
+
+
+ Account
+
+
+ `,
+});
+
+export const ToggleNavigation: StoryFn = (args) => ({
+ setup() {
+ const isOpen = ref(true);
+ return { args, isOpen };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ VBtn,
+ },
+ template: `
+ Toggle Navigation
+
+
+ Home
+
+
+ Recents
+
+
+ Favorites
+
+
+ Nearby
+
+
+ Account
+
+
+ `,
+});
+
+export const WithButton: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ VBtn,
+ },
+ template: `
+
+
+ `,
+});
+
+export const WithFabButton: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ VBtn,
+ },
+ template: `
+
+
+ `,
+});
+
+export const DarkMode: StoryFn = (args) => ({
+ setup() {
+ return { args, colors: defaultColors };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ },
+ template: `
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/bottom-sheets/src/BottomSheetBody.vue b/packages/ui/src/bottom-sheets/src/BottomSheetBody.vue
similarity index 100%
rename from packages/bottom-sheets/src/BottomSheetBody.vue
rename to packages/ui/src/bottom-sheets/src/BottomSheetBody.vue
diff --git a/packages/bottom-sheets/src/BottomSheetFooter.vue b/packages/ui/src/bottom-sheets/src/BottomSheetFooter.vue
similarity index 100%
rename from packages/bottom-sheets/src/BottomSheetFooter.vue
rename to packages/ui/src/bottom-sheets/src/BottomSheetFooter.vue
diff --git a/packages/bottom-sheets/src/BottomSheetHandle.vue b/packages/ui/src/bottom-sheets/src/BottomSheetHandle.vue
similarity index 96%
rename from packages/bottom-sheets/src/BottomSheetHandle.vue
rename to packages/ui/src/bottom-sheets/src/BottomSheetHandle.vue
index f98cb6026..a573f78c2 100644
--- a/packages/bottom-sheets/src/BottomSheetHandle.vue
+++ b/packages/ui/src/bottom-sheets/src/BottomSheetHandle.vue
@@ -1,88 +1,88 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/packages/bottom-sheets/src/api.ts b/packages/ui/src/bottom-sheets/src/api.ts
similarity index 100%
rename from packages/bottom-sheets/src/api.ts
rename to packages/ui/src/bottom-sheets/src/api.ts
diff --git a/packages/bottom-sheets/src/index.ts b/packages/ui/src/bottom-sheets/src/index.ts
similarity index 100%
rename from packages/bottom-sheets/src/index.ts
rename to packages/ui/src/bottom-sheets/src/index.ts
diff --git a/packages/bottom-sheets/src/stories/Changelog.stories.mdx b/packages/ui/src/bottom-sheets/src/stories/Changelog.stories.mdx
similarity index 100%
rename from packages/bottom-sheets/src/stories/Changelog.stories.mdx
rename to packages/ui/src/bottom-sheets/src/stories/Changelog.stories.mdx
diff --git a/packages/bottom-sheets/src/stories/Readme.stories.mdx b/packages/ui/src/bottom-sheets/src/stories/Readme.stories.mdx
similarity index 100%
rename from packages/bottom-sheets/src/stories/Readme.stories.mdx
rename to packages/ui/src/bottom-sheets/src/stories/Readme.stories.mdx
diff --git a/packages/bottom-sheets/src/types.ts b/packages/ui/src/bottom-sheets/src/types.ts
similarity index 100%
rename from packages/bottom-sheets/src/types.ts
rename to packages/ui/src/bottom-sheets/src/types.ts
diff --git a/packages/breadcrumbs/tailwind.config.js b/packages/ui/src/bottom-sheets/tailwind.config.js
similarity index 100%
rename from packages/breadcrumbs/tailwind.config.js
rename to packages/ui/src/bottom-sheets/tailwind.config.js
diff --git a/packages/bottom-sheets/tsconfig.json b/packages/ui/src/bottom-sheets/tsconfig.json
similarity index 100%
rename from packages/bottom-sheets/tsconfig.json
rename to packages/ui/src/bottom-sheets/tsconfig.json
diff --git a/packages/bottom-sheets/vite.config.js b/packages/ui/src/bottom-sheets/vite.config.js
similarity index 100%
rename from packages/bottom-sheets/vite.config.js
rename to packages/ui/src/bottom-sheets/vite.config.js
diff --git a/packages/breadcrumbs/CHANGELOG.md b/packages/ui/src/breadcrumbs/CHANGELOG.md
similarity index 100%
rename from packages/breadcrumbs/CHANGELOG.md
rename to packages/ui/src/breadcrumbs/CHANGELOG.md
diff --git a/packages/breadcrumbs/README.md b/packages/ui/src/breadcrumbs/README.md
similarity index 100%
rename from packages/breadcrumbs/README.md
rename to packages/ui/src/breadcrumbs/README.md
diff --git a/packages/breadcrumbs/package.json b/packages/ui/src/breadcrumbs/package.json
similarity index 100%
rename from packages/breadcrumbs/package.json
rename to packages/ui/src/breadcrumbs/package.json
diff --git a/packages/button/postcss.config.js b/packages/ui/src/breadcrumbs/postcss.config.js
similarity index 100%
rename from packages/button/postcss.config.js
rename to packages/ui/src/breadcrumbs/postcss.config.js
diff --git a/packages/breadcrumbs/src/Changelog.stories.mdx b/packages/ui/src/breadcrumbs/src/Changelog.stories.mdx
similarity index 100%
rename from packages/breadcrumbs/src/Changelog.stories.mdx
rename to packages/ui/src/breadcrumbs/src/Changelog.stories.mdx
diff --git a/packages/breadcrumbs/src/Readme.stories.mdx b/packages/ui/src/breadcrumbs/src/Readme.stories.mdx
similarity index 100%
rename from packages/breadcrumbs/src/Readme.stories.mdx
rename to packages/ui/src/breadcrumbs/src/Readme.stories.mdx
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.dark.scss b/packages/ui/src/breadcrumbs/src/VBreadcrumbs.dark.scss
similarity index 100%
rename from packages/breadcrumbs/src/VBreadcrumbs.dark.scss
rename to packages/ui/src/breadcrumbs/src/VBreadcrumbs.dark.scss
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.scss b/packages/ui/src/breadcrumbs/src/VBreadcrumbs.scss
similarity index 100%
rename from packages/breadcrumbs/src/VBreadcrumbs.scss
rename to packages/ui/src/breadcrumbs/src/VBreadcrumbs.scss
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.spec.ts b/packages/ui/src/breadcrumbs/src/VBreadcrumbs.spec.ts
similarity index 100%
rename from packages/breadcrumbs/src/VBreadcrumbs.spec.ts
rename to packages/ui/src/breadcrumbs/src/VBreadcrumbs.spec.ts
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.stories.ts b/packages/ui/src/breadcrumbs/src/VBreadcrumbs.stories.ts
similarity index 83%
rename from packages/breadcrumbs/src/VBreadcrumbs.stories.ts
rename to packages/ui/src/breadcrumbs/src/VBreadcrumbs.stories.ts
index 500de4dc9..d90cf8da8 100644
--- a/packages/breadcrumbs/src/VBreadcrumbs.stories.ts
+++ b/packages/ui/src/breadcrumbs/src/VBreadcrumbs.stories.ts
@@ -1,241 +1,241 @@
-import {Dropdown, DropdownBtn, DropdownItem} from '@morpheme/dropdown';
-import VBreadcrumbs from './VBreadcrumbs.vue';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import Icon from '@morpheme/icon';
-import type {VBreadcrumbItemProps} from './types';
-import {ref} from 'vue';
-import VBreadcrumbsDivider from './VBreadcrumbsDivider.vue';
-import VBreadcrumbsItem from './VBreadcrumbsItem.vue';
-
-const items = [
- {
- title: 'Home',
- to: '/',
- },
- {
- title: 'Account',
- to: '/account',
- },
- {
- title: 'Profile',
- to: '/account/profile',
- },
- {
- title: 'Settings',
- to: '/account/profile/settings',
- disabled: true,
- },
-];
-
-export default {
- title: 'Components/Breadcrumbs',
- component: VBreadcrumbs,
- argTypes: {},
- args: {
- items,
- divider: '/',
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VBreadcrumbs},
- setup() {
- return {args};
- },
- template: `
-
-
-`,
- },
- },
-};
-
-export const OptionalRouterLink: StoryFn = (args) => ({
- components: {VBreadcrumbs, Icon},
- setup() {
- const items = ref([
- {
- title: 'Item 1',
- },
- {
- title: 'Item 2',
- },
- ]);
- return {args, items};
- },
- template: `
-
-
- Home
-
-
- Account
-
-
- Profile
-
-
-`,
-});
-Bare.parameters = {
- docs: {
- source: {
- language: 'html',
- code: `
-
-
-
-
-
- Home
-
-
- Account
-
-
-
- ...
-
-
- Profile
-
-
- Settings
-
-
-
- Profile
-
-
-`,
-});
-
-export const DarkMode = () => ({
- components: {VBreadcrumbs},
- setup() {
- return {
- items,
- };
- },
- template: `
-
+
+
+`,
+ },
+ },
+};
+
+export const OptionalRouterLink: StoryFn = (args) => ({
+ components: { VBreadcrumbs, Icon },
+ setup() {
+ const items = ref([
+ {
+ title: 'Item 1',
+ },
+ {
+ title: 'Item 2',
+ },
+ ]);
+ return { args, items };
+ },
+ template: `
+
+
+ Home
+
+
+ Account
+
+
+ Profile
+
+
+`,
+});
+Bare.parameters = {
+ docs: {
+ source: {
+ language: 'html',
+ code: `
+
+
+
+
+
+ Home
+
+
+ Account
+
+
+
+ ...
+
+
+ Profile
+
+
+ Settings
+
+
+
+ Profile
+
+
+`,
+});
+
+export const DarkMode = () => ({
+ components: { VBreadcrumbs },
+ setup() {
+ return {
+ items,
+ };
+ },
+ template: `
+
-
- {{ title }}
-
-
-
+
+
+
+
+
+ {{ title }}
+
+
+
diff --git a/packages/breadcrumbs/src/index.ts b/packages/ui/src/breadcrumbs/src/index.ts
similarity index 98%
rename from packages/breadcrumbs/src/index.ts
rename to packages/ui/src/breadcrumbs/src/index.ts
index e48ecec1f..c0c17671d 100644
--- a/packages/breadcrumbs/src/index.ts
+++ b/packages/ui/src/breadcrumbs/src/index.ts
@@ -1,4 +1,4 @@
-export * from './types';
-export {default as VBreadcrumbs} from './VBreadcrumbs.vue';
-export {default as VBreadcrumbsItem} from './VBreadcrumbsItem.vue';
-export {default as VBreadcrumbsDivider} from './VBreadcrumbsDivider.vue';
+export * from './types';
+export {default as VBreadcrumbs} from './VBreadcrumbs.vue';
+export {default as VBreadcrumbsItem} from './VBreadcrumbsItem.vue';
+export {default as VBreadcrumbsDivider} from './VBreadcrumbsDivider.vue';
diff --git a/packages/breadcrumbs/src/types.ts b/packages/ui/src/breadcrumbs/src/types.ts
similarity index 95%
rename from packages/breadcrumbs/src/types.ts
rename to packages/ui/src/breadcrumbs/src/types.ts
index 6f1afafe0..4e0321b6f 100644
--- a/packages/breadcrumbs/src/types.ts
+++ b/packages/ui/src/breadcrumbs/src/types.ts
@@ -1,7 +1,7 @@
-import type {RouteLocationRaw} from 'vue-router';
-
-export type VBreadcrumbItemProps = {
- title: string;
- to?: RouteLocationRaw;
- disabled?: boolean;
-};
+import type {RouteLocationRaw} from 'vue-router';
+
+export type VBreadcrumbItemProps = {
+ title: string;
+ to?: RouteLocationRaw;
+ disabled?: boolean;
+};
diff --git a/packages/button/src/vue.d.ts b/packages/ui/src/breadcrumbs/src/vue.d.ts
similarity index 100%
rename from packages/button/src/vue.d.ts
rename to packages/ui/src/breadcrumbs/src/vue.d.ts
diff --git a/packages/button/tailwind.config.js b/packages/ui/src/breadcrumbs/tailwind.config.js
similarity index 100%
rename from packages/button/tailwind.config.js
rename to packages/ui/src/breadcrumbs/tailwind.config.js
diff --git a/packages/breadcrumbs/tsconfig.json b/packages/ui/src/breadcrumbs/tsconfig.json
similarity index 100%
rename from packages/breadcrumbs/tsconfig.json
rename to packages/ui/src/breadcrumbs/tsconfig.json
diff --git a/packages/breadcrumbs/vite.config.js b/packages/ui/src/breadcrumbs/vite.config.js
similarity index 100%
rename from packages/breadcrumbs/vite.config.js
rename to packages/ui/src/breadcrumbs/vite.config.js
diff --git a/packages/button/.gitignore b/packages/ui/src/button/.gitignore
similarity index 100%
rename from packages/button/.gitignore
rename to packages/ui/src/button/.gitignore
diff --git a/packages/button/CHANGELOG.md b/packages/ui/src/button/CHANGELOG.md
similarity index 100%
rename from packages/button/CHANGELOG.md
rename to packages/ui/src/button/CHANGELOG.md
diff --git a/packages/button/README.md b/packages/ui/src/button/README.md
similarity index 100%
rename from packages/button/README.md
rename to packages/ui/src/button/README.md
diff --git a/packages/button/package.json b/packages/ui/src/button/package.json
similarity index 100%
rename from packages/button/package.json
rename to packages/ui/src/button/package.json
diff --git a/packages/card/postcss.config.js b/packages/ui/src/button/postcss.config.js
similarity index 100%
rename from packages/card/postcss.config.js
rename to packages/ui/src/button/postcss.config.js
diff --git a/packages/button/src/Changelog.stories.mdx b/packages/ui/src/button/src/Changelog.stories.mdx
similarity index 100%
rename from packages/button/src/Changelog.stories.mdx
rename to packages/ui/src/button/src/Changelog.stories.mdx
diff --git a/packages/button/src/Readme.stories.mdx b/packages/ui/src/button/src/Readme.stories.mdx
similarity index 100%
rename from packages/button/src/Readme.stories.mdx
rename to packages/ui/src/button/src/Readme.stories.mdx
diff --git a/packages/button/src/VBtn.dark.scss b/packages/ui/src/button/src/VBtn.dark.scss
similarity index 100%
rename from packages/button/src/VBtn.dark.scss
rename to packages/ui/src/button/src/VBtn.dark.scss
diff --git a/packages/button/src/VBtn.scss b/packages/ui/src/button/src/VBtn.scss
similarity index 100%
rename from packages/button/src/VBtn.scss
rename to packages/ui/src/button/src/VBtn.scss
diff --git a/packages/button/src/VBtn.spec.ts b/packages/ui/src/button/src/VBtn.spec.ts
similarity index 100%
rename from packages/button/src/VBtn.spec.ts
rename to packages/ui/src/button/src/VBtn.spec.ts
diff --git a/packages/button/src/VBtn.stories.ts b/packages/ui/src/button/src/VBtn.stories.ts
similarity index 88%
rename from packages/button/src/VBtn.stories.ts
rename to packages/ui/src/button/src/VBtn.stories.ts
index 7ce34bfe0..7a19c87e2 100644
--- a/packages/button/src/VBtn.stories.ts
+++ b/packages/ui/src/button/src/VBtn.stories.ts
@@ -1,509 +1,509 @@
-import type {Meta, StoryFn} from '@storybook/vue3';
-import VBtn from './VBtn.vue';
-import type {Props as VBtnProps} from './VBtn.vue';
-import VIcon from '@morpheme/icon';
-import {defaultColors} from '@morpheme/theme/defaultTheme';
-import VBtnGroup from './VBtnGroup.vue';
-import VBtnToolbar from './VBtnToolbar.vue';
-import ButtonTest from './stories/ButtonTest.vue';
-
-const colors = defaultColors;
-const defaultSizes = ['sm', 'md', 'lg'];
-
-export default {
- component: VBtn,
- title: 'Forms/Button',
- argTypes: {
- color: {
- control: 'select',
- options: colors,
- },
- size: {
- control: 'select',
- options: defaultSizes,
- },
- },
- parameters: {
- docs: {
- source: {
- type: 'code',
- },
- },
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VBtn},
- setup() {
- return {args, colors};
- },
- template: `Button
-Button
-Button
-Button
-Button
-Button
-Button
-Button
- `,
- },
- },
-};
-
-export const Outlined = Template.bind({});
-Outlined.args = {color: 'primary', outlined: true};
-Outlined.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Text = Template.bind({});
-Text.args = {color: 'primary', text: true};
-Text.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Soft = Template.bind({});
-Soft.args = {color: 'primary', soft: true};
-Soft.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Rounded = Template.bind({});
-Rounded.args = {color: 'primary', rounded: true};
-Rounded.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Tile = Template.bind({});
-Tile.args = {color: 'primary', tile: true};
-Tile.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Flush = Template.bind({});
-Flush.args = {color: 'primary', flush: true, text: true};
-Flush.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {color: 'primary', disabled: true};
-Disabled.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const OutlinedDisabled = Template.bind({});
-OutlinedDisabled.args = {color: 'primary', disabled: true, outlined: true};
-OutlinedDisabled.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Loading = Template.bind({});
-Loading.args = {color: 'primary', loading: true};
-Loading.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Block = Template.bind({});
-Block.args = {color: 'primary', block: true};
-Block.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Shadow = Template.bind({});
-Shadow.args = {color: 'primary', shadow: true};
-Shadow.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const NoRingEffect = Template.bind({});
-NoRingEffect.args = {color: 'primary', noRing: true};
-NoRingEffect.parameters = {
- docs: {
- source: {
- code: 'Button ',
- },
- },
-};
-
-export const Sizes: StoryFn = (args) => ({
- components: {Button: VBtn},
- setup() {
- const sizes = ['sm', 'md', 'lg', 'xl', '2xl'];
- return {args, sizes, defaultColors};
- },
- template: `
- Button
- Button
- Button
- Button
- Button
- `,
- },
- },
-};
-
-export const Icons: StoryFn = (args) => ({
- components: {VBtn},
- template: `
-
- Search
-
-
- Download
-
- `,
- },
- },
-};
-
-export const Fab: StoryFn = (args) => ({
- components: {VBtn},
- template: `
- = () => ({
- components: {VIcon},
- setup() {
- return {
- colors: ['default', 'dark', ...defaultColors],
- sizes: defaultSizes,
- };
- },
- template: `
- = () => ({
- components: {VIcon, VBtn},
- template: `
-Default
-Disabled
-Router Link
-Href Link
-Href Link (New Tab)
- `,
-});
-
-export const ButtonGroup: StoryFn = () => ({
- components: {VBtnGroup, VBtnToolbar, VBtn},
- template: `
-
- Button
- Button
- Button
-
-
- sm
- sm
- sm
-
-
- lg
- lg
- lg
-
-
- Button
- Button
- Button
-
-
- Button
- Button
- Button
-
-
- Button
- Button
- Button
-
-
- Button
- Button
- Button
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-});
-
-export const DarkMode: StoryFn = () => ({
- components: {VBtnGroup, VBtnToolbar, VBtn},
- setup() {
- return {
- colors,
- variants: ['default', 'outlined', 'text', 'soft'],
- };
- },
- template: `
- = (args) => ({
- components: {ButtonTest},
- setup() {
- return {args, colors};
- },
- template: `
- = (args) => ({
+ components: { VBtn },
+ setup() {
+ return { args, colors };
+ },
+ template: `Button
+Button
+Button
+Button
+Button
+Button
+Button
+Button
+ `,
+ },
+ },
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = { color: 'primary', outlined: true };
+Outlined.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Text = Template.bind({});
+Text.args = { color: 'primary', text: true };
+Text.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Soft = Template.bind({});
+Soft.args = { color: 'primary', soft: true };
+Soft.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Rounded = Template.bind({});
+Rounded.args = { color: 'primary', rounded: true };
+Rounded.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Tile = Template.bind({});
+Tile.args = { color: 'primary', tile: true };
+Tile.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Flush = Template.bind({});
+Flush.args = { color: 'primary', flush: true, text: true };
+Flush.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = { color: 'primary', disabled: true };
+Disabled.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const OutlinedDisabled = Template.bind({});
+OutlinedDisabled.args = { color: 'primary', disabled: true, outlined: true };
+OutlinedDisabled.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Loading = Template.bind({});
+Loading.args = { color: 'primary', loading: true };
+Loading.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Block = Template.bind({});
+Block.args = { color: 'primary', block: true };
+Block.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Shadow = Template.bind({});
+Shadow.args = { color: 'primary', shadow: true };
+Shadow.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const NoRingEffect = Template.bind({});
+NoRingEffect.args = { color: 'primary', noRing: true };
+NoRingEffect.parameters = {
+ docs: {
+ source: {
+ code: 'Button ',
+ },
+ },
+};
+
+export const Sizes: StoryFn = (args) => ({
+ components: { Button: VBtn },
+ setup() {
+ const sizes = ['sm', 'md', 'lg', 'xl', '2xl'];
+ return { args, sizes, defaultColors };
+ },
+ template: `
+ Button
+ Button
+ Button
+ Button
+ Button
+ `,
+ },
+ },
+};
+
+export const Icons: StoryFn = (args) => ({
+ components: { VBtn },
+ template: `
+
+ Search
+
+
+ Download
+
+ `,
+ },
+ },
+};
+
+export const Fab: StoryFn = (args) => ({
+ components: { VBtn },
+ template: `
+ = () => ({
+ components: { VIcon },
+ setup() {
+ return {
+ colors: ['default', 'dark', ...defaultColors],
+ sizes: defaultSizes,
+ };
+ },
+ template: `
+ = () => ({
+ components: { VIcon, VBtn },
+ template: `
+Default
+Disabled
+Router Link
+Href Link
+Href Link (New Tab)
+ `,
+});
+
+export const ButtonGroup: StoryFn = () => ({
+ components: { VBtnGroup, VBtnToolbar, VBtn },
+ template: `
+
+ Button
+ Button
+ Button
+
+
+ sm
+ sm
+ sm
+
+
+ lg
+ lg
+ lg
+
+
+ Button
+ Button
+ Button
+
+
+ Button
+ Button
+ Button
+
+
+ Button
+ Button
+ Button
+
+
+ Button
+ Button
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+});
+
+export const DarkMode: StoryFn = () => ({
+ components: { VBtnGroup, VBtnToolbar, VBtn },
+ setup() {
+ return {
+ colors,
+ variants: ['default', 'outlined', 'text', 'soft'],
+ };
+ },
+ template: `
+ = (args) => ({
+ components: { ButtonTest },
+ setup() {
+ return { args, colors };
+ },
+ template: `
+
-
- {{args.title}}
-
-
- {{args.footer}}
-
- {{ args.body }}
- `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = {
- docs: {
- source: {
- code: 'Body ',
- },
- },
-};
-
-export const HideFooter = Template.bind({});
-HideFooter.args = {
- hideFooter: true,
-};
-HideFooter.parameters = {
- docs: {
- source: {
- code: 'Body ',
- },
- },
-};
-
-export const HideHeader = Template.bind({});
-HideHeader.args = {
- hideHeader: true,
-};
-HideHeader.parameters = {
- docs: {
- source: {
- code: 'Body ',
- },
- },
-};
-
-export const BodyOnly = Template.bind({});
-BodyOnly.args = {
- hideHeader: true,
- hideFooter: true,
-};
-BodyOnly.parameters = {
- docs: {
- source: {
- code: 'Body ',
- },
- },
-};
-
-export const Image = Template.bind({});
-Image.args = {
- image: 'https://picsum.photos/200/300',
- imageAlt: 'random image',
- imageClass: 'h-40',
- footer: '',
-};
-
-export const CustomSlots: StoryFn = (args) => ({
- components: {VCard, VBtn},
- setup() {
- return {args};
- },
- template: `
-
-
- Agree
- Cancel
-
-
-
-`,
-});
-CustomSlots.parameters = {
- docs: {
- source: {
- code: `
-
-
- Agree
- Cancel
-
-
- `,
- },
- },
-};
-
-export const Flat = Template.bind({});
-Flat.args = {
- flat: true,
-};
-Flat.parameters = {
- docs: {
- source: {
- code: 'Body ',
- },
- },
-};
-
-export const Colors: StoryFn<{}> = (args) => ({
- components: {VCard},
- setup() {
- return {args, colors: defaultColors};
- },
- template: `
-
- Card: {{ color }}
-
-`,
-});
-
-export const Bordered: StoryFn<{}> = (args) => ({
- components: {VCard, VBtn},
- setup() {
- const selectedColor = ref('primary');
- const positions = ['top', 'left', 'bottom', 'right'];
- return {args, colors: defaultColors, positions, selectedColor};
- },
- template: `
-
- Border on {{ position }}
-
-`,
-});
-
-export const Shadow: StoryFn<{}> = (args) => ({
- components: {VCard},
- setup() {
- const shadows = [true, 'sm', 'md', 'lg', 'xl', '2xl', 'inner', 'none'];
-
- return {args, shadows};
- },
- template: `
-
- Shadow: {{ shadow }}
-
-`,
-});
-
-export const DarkMode: StoryFn<{}> = () => ({
- components: {VCard},
- setup() {
- return {defaultColors};
- },
- template: `
-
-
- {{ color }}
-
-
-
- {{ color }}
-
-
-`,
-});
-
-const DummyLink = defineComponent({
- template: `
+
+ {{args.title}}
+
+
+ {{args.footer}}
+
+ {{ args.body }}
+ `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+ docs: {
+ source: {
+ code: 'Body ',
+ },
+ },
+};
+
+export const HideFooter = Template.bind({});
+HideFooter.args = {
+ hideFooter: true,
+};
+HideFooter.parameters = {
+ docs: {
+ source: {
+ code: 'Body ',
+ },
+ },
+};
+
+export const HideHeader = Template.bind({});
+HideHeader.args = {
+ hideHeader: true,
+};
+HideHeader.parameters = {
+ docs: {
+ source: {
+ code: 'Body ',
+ },
+ },
+};
+
+export const BodyOnly = Template.bind({});
+BodyOnly.args = {
+ hideHeader: true,
+ hideFooter: true,
+};
+BodyOnly.parameters = {
+ docs: {
+ source: {
+ code: 'Body ',
+ },
+ },
+};
+
+export const Image = Template.bind({});
+Image.args = {
+ image: 'https://picsum.photos/200/300',
+ imageAlt: 'random image',
+ imageClass: 'h-40',
+ footer: '',
+};
+
+export const CustomSlots: StoryFn = (args) => ({
+ components: { VCard, VBtn },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ Agree
+ Cancel
+
+
+
+`,
+});
+CustomSlots.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ Agree
+ Cancel
+
+
+ `,
+ },
+ },
+};
+
+export const Flat = Template.bind({});
+Flat.args = {
+ flat: true,
+};
+Flat.parameters = {
+ docs: {
+ source: {
+ code: 'Body ',
+ },
+ },
+};
+
+export const Colors: StoryFn<{}> = (args) => ({
+ components: { VCard },
+ setup() {
+ return { args, colors: defaultColors };
+ },
+ template: `
+
+ Card: {{ color }}
+
+`,
+});
+
+export const Bordered: StoryFn<{}> = (args) => ({
+ components: { VCard, VBtn },
+ setup() {
+ const selectedColor = ref('primary');
+ const positions = ['top', 'left', 'bottom', 'right'];
+ return { args, colors: defaultColors, positions, selectedColor };
+ },
+ template: `
+
+ Border on {{ position }}
+
+`,
+});
+
+export const Shadow: StoryFn<{}> = (args) => ({
+ components: { VCard },
+ setup() {
+ const shadows = [true, 'sm', 'md', 'lg', 'xl', '2xl', 'inner', 'none'];
+
+ return { args, shadows };
+ },
+ template: `
+
+ Shadow: {{ shadow }}
+
+`,
+});
+
+export const DarkMode: StoryFn<{}> = () => ({
+ components: { VCard },
+ setup() {
+ return { defaultColors };
+ },
+ template: `
+
+
+ {{ color }}
+
+
+
+ {{ color }}
+
+
+`,
+});
+
+const DummyLink = defineComponent({
+ template: `
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/packages/card/src/VCardBody.vue b/packages/ui/src/card/src/VCardBody.vue
similarity index 100%
rename from packages/card/src/VCardBody.vue
rename to packages/ui/src/card/src/VCardBody.vue
diff --git a/packages/card/src/VCardFooter.vue b/packages/ui/src/card/src/VCardFooter.vue
similarity index 100%
rename from packages/card/src/VCardFooter.vue
rename to packages/ui/src/card/src/VCardFooter.vue
diff --git a/packages/card/src/VCardHeader.vue b/packages/ui/src/card/src/VCardHeader.vue
similarity index 100%
rename from packages/card/src/VCardHeader.vue
rename to packages/ui/src/card/src/VCardHeader.vue
diff --git a/packages/card/src/VCardImage.vue b/packages/ui/src/card/src/VCardImage.vue
similarity index 100%
rename from packages/card/src/VCardImage.vue
rename to packages/ui/src/card/src/VCardImage.vue
diff --git a/packages/card/src/api.ts b/packages/ui/src/card/src/api.ts
similarity index 100%
rename from packages/card/src/api.ts
rename to packages/ui/src/card/src/api.ts
diff --git a/packages/card/src/index.ts b/packages/ui/src/card/src/index.ts
similarity index 97%
rename from packages/card/src/index.ts
rename to packages/ui/src/card/src/index.ts
index 3a110bdb5..ee4c2ea83 100644
--- a/packages/card/src/index.ts
+++ b/packages/ui/src/card/src/index.ts
@@ -1,7 +1,7 @@
-import './VCard.dark.scss';
-export {default} from './VCard.vue';
-export {default as VCard} from './VCard.vue';
-export {default as VCardHeader} from './VCardHeader.vue';
-export {default as VCardBody} from './VCardBody.vue';
-export {default as VCardFooter} from './VCardFooter.vue';
-export {default as VCardImage} from './VCardImage.vue';
+import './VCard.dark.scss';
+export {default} from './VCard.vue';
+export {default as VCard} from './VCard.vue';
+export {default as VCardHeader} from './VCardHeader.vue';
+export {default as VCardBody} from './VCardBody.vue';
+export {default as VCardFooter} from './VCardFooter.vue';
+export {default as VCardImage} from './VCardImage.vue';
diff --git a/packages/collapsible/src/vue.d.ts b/packages/ui/src/card/src/vue.d.ts
similarity index 100%
rename from packages/collapsible/src/vue.d.ts
rename to packages/ui/src/card/src/vue.d.ts
diff --git a/packages/collapsible/tailwind.config.js b/packages/ui/src/card/tailwind.config.js
similarity index 100%
rename from packages/collapsible/tailwind.config.js
rename to packages/ui/src/card/tailwind.config.js
diff --git a/packages/collapsible/tsconfig.json b/packages/ui/src/card/tsconfig.json
similarity index 100%
rename from packages/collapsible/tsconfig.json
rename to packages/ui/src/card/tsconfig.json
diff --git a/packages/card/vite.config.js b/packages/ui/src/card/vite.config.js
similarity index 100%
rename from packages/card/vite.config.js
rename to packages/ui/src/card/vite.config.js
diff --git a/packages/collapsible/CHANGELOG.md b/packages/ui/src/collapsible/CHANGELOG.md
similarity index 100%
rename from packages/collapsible/CHANGELOG.md
rename to packages/ui/src/collapsible/CHANGELOG.md
diff --git a/packages/collapsible/README.md b/packages/ui/src/collapsible/README.md
similarity index 100%
rename from packages/collapsible/README.md
rename to packages/ui/src/collapsible/README.md
diff --git a/packages/collapsible/package.json b/packages/ui/src/collapsible/package.json
similarity index 100%
rename from packages/collapsible/package.json
rename to packages/ui/src/collapsible/package.json
diff --git a/packages/container/postcss.config.js b/packages/ui/src/collapsible/postcss.config.js
similarity index 100%
rename from packages/container/postcss.config.js
rename to packages/ui/src/collapsible/postcss.config.js
diff --git a/packages/collapsible/src/Changelog.stories.mdx b/packages/ui/src/collapsible/src/Changelog.stories.mdx
similarity index 100%
rename from packages/collapsible/src/Changelog.stories.mdx
rename to packages/ui/src/collapsible/src/Changelog.stories.mdx
diff --git a/packages/collapsible/src/Readme.stories.mdx b/packages/ui/src/collapsible/src/Readme.stories.mdx
similarity index 100%
rename from packages/collapsible/src/Readme.stories.mdx
rename to packages/ui/src/collapsible/src/Readme.stories.mdx
diff --git a/packages/collapsible/src/VCollapse.spec.ts b/packages/ui/src/collapsible/src/VCollapse.spec.ts
similarity index 96%
rename from packages/collapsible/src/VCollapse.spec.ts
rename to packages/ui/src/collapsible/src/VCollapse.spec.ts
index b7958892c..422ab0d35 100644
--- a/packages/collapsible/src/VCollapse.spec.ts
+++ b/packages/ui/src/collapsible/src/VCollapse.spec.ts
@@ -1,54 +1,54 @@
-import { mount } from '@vue/test-utils';
-import VCollapse from './VCollapse.vue';
-
-describe('VCollapse', () => {
- it('renders the component with default props', () => {
- const wrapper = mount(VCollapse);
-
- expect(wrapper.exists()).toBe(true);
- expect(wrapper.props().duration).toBe(300);
- expect(wrapper.props().transition).toBe('ease-in-out');
- expect(wrapper.props().show).toBe(false);
- expect(wrapper.props().navbar).toBe(false);
- expect(wrapper.emitted().finish).toBeFalsy();
- });
-
- it('renders the component with custom props', () => {
- const wrapper = mount(VCollapse, {
- props: {
- duration: 500,
- transition: 'linear',
- show: true,
- navbar: true,
- },
- });
-
- expect(wrapper.exists()).toBe(true);
- expect(wrapper.props().duration).toBe(500);
- expect(wrapper.props().transition).toBe('linear');
- expect(wrapper.props().show).toBe(true);
- expect(wrapper.props().navbar).toBe(true);
- expect(wrapper.emitted().finish).toBeFalsy();
- });
-
- it('collapses and expands the component when show prop changes', async () => {
- const wrapper = mount(VCollapse);
-
- expect(wrapper.vm.visible).toBe(false);
- expect(wrapper.vm.collapsing).toBe(false);
-
- wrapper.setProps({ show: true });
-
- await wrapper.vm.$nextTick();
-
- expect(wrapper.vm.visible).toBe(true);
- expect(wrapper.vm.collapsing).toBeTruthy();
-
- wrapper.setProps({ show: false });
-
- await wrapper.vm.$nextTick();
-
- expect(wrapper.vm.visible).toBe(false);
- expect(wrapper.vm.collapsing).toBeTruthy();
- });
-});
+import { mount } from '@vue/test-utils';
+import VCollapse from './VCollapse.vue';
+
+describe('VCollapse', () => {
+ it('renders the component with default props', () => {
+ const wrapper = mount(VCollapse);
+
+ expect(wrapper.exists()).toBe(true);
+ expect(wrapper.props().duration).toBe(300);
+ expect(wrapper.props().transition).toBe('ease-in-out');
+ expect(wrapper.props().show).toBe(false);
+ expect(wrapper.props().navbar).toBe(false);
+ expect(wrapper.emitted().finish).toBeFalsy();
+ });
+
+ it('renders the component with custom props', () => {
+ const wrapper = mount(VCollapse, {
+ props: {
+ duration: 500,
+ transition: 'linear',
+ show: true,
+ navbar: true,
+ },
+ });
+
+ expect(wrapper.exists()).toBe(true);
+ expect(wrapper.props().duration).toBe(500);
+ expect(wrapper.props().transition).toBe('linear');
+ expect(wrapper.props().show).toBe(true);
+ expect(wrapper.props().navbar).toBe(true);
+ expect(wrapper.emitted().finish).toBeFalsy();
+ });
+
+ it('collapses and expands the component when show prop changes', async () => {
+ const wrapper = mount(VCollapse);
+
+ expect(wrapper.vm.visible).toBe(false);
+ expect(wrapper.vm.collapsing).toBe(false);
+
+ wrapper.setProps({ show: true });
+
+ await wrapper.vm.$nextTick();
+
+ expect(wrapper.vm.visible).toBe(true);
+ expect(wrapper.vm.collapsing).toBeTruthy();
+
+ wrapper.setProps({ show: false });
+
+ await wrapper.vm.$nextTick();
+
+ expect(wrapper.vm.visible).toBe(false);
+ expect(wrapper.vm.collapsing).toBeTruthy();
+ });
+});
diff --git a/packages/collapsible/src/VCollapse.stories.ts b/packages/ui/src/collapsible/src/VCollapse.stories.ts
similarity index 86%
rename from packages/collapsible/src/VCollapse.stories.ts
rename to packages/ui/src/collapsible/src/VCollapse.stories.ts
index d70bf4fee..dbaa4aa86 100644
--- a/packages/collapsible/src/VCollapse.stories.ts
+++ b/packages/ui/src/collapsible/src/VCollapse.stories.ts
@@ -1,110 +1,110 @@
-import type {Story} from '@storybook/vue3';
-import {ref} from 'vue';
-import VCollapse from './VCollapse.vue';
-import VBtn from '@morpheme/button';
-import {
- List as VList,
- ListItem as VListItem,
- ListItemHeader as VListItemHeader,
-} from '@morpheme/list';
-
-export default {
- title: 'Components/Collapse',
- component: VCollapse,
- args: {},
-};
-
-export const Default: Story<{}> = (args) => ({
- components: {VCollapse, VBtn},
- setup() {
- const isOpen = ref(false);
-
- return {args, isOpen};
- },
- template: `
- Toggle
-
- Anim eiusmod ea nostrud do incididunt consequat duis adipisicing reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui. Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est pariatur qui amet cupidatat magna est adipisicing quis ea ea.
-
- `,
-});
-
-export const ExpandedList: Story<{}> = (args) => ({
- components: {VCollapse, VList, VListItem, VListItemHeader},
- setup() {
- const items = ref([
- {
- question: 'What is Morpheme?',
- answer: 'Morpheme is a collection of UI components for Vue 3.',
- isOpen: true,
- },
- {
- question: 'What is Vue 3?',
- answer: 'Vue 3 is the latest version of the Vue framework.',
- isOpen: false,
- },
- {
- question: 'What is the difference between Vue 2 and Vue 3?',
- answer: 'Vue 3 is faster and smaller than Vue 2.',
- isOpen: false,
- },
- ]);
-
- return {args, items};
- },
- template: `
-
-
-
- {{ item.question }}
-
-
- {{ item.answer }}
-
-
-
- `,
-});
-
-export const Accordion: Story<{}> = (args) => ({
- components: {VCollapse, VList, VListItem, VListItemHeader},
- setup() {
- const opened = ref(0);
- const items = ref([
- {
- question: 'What is Morpheme?',
- answer: 'Morpheme is a collection of UI components for Vue 3.',
- },
- {
- question: 'What is Vue 3?',
- answer: 'Vue 3 is the latest version of the Vue framework.',
- },
- {
- question: 'What is the difference between Vue 2 and Vue 3?',
- answer: 'Vue 3 is faster and smaller than Vue 2.',
- },
- ]);
-
- return {args, opened, items};
- },
- template: `
-
-
-
- {{ item.question }}
-
-
- {{ item.answer }}
-
-
-
- `,
-});
+import type { Story } from '@storybook/vue3';
+import { ref } from 'vue';
+import VCollapse from './VCollapse.vue';
+import VBtn from '../../button/src';
+import {
+ List as VList,
+ ListItem as VListItem,
+ ListItemHeader as VListItemHeader,
+} from '../../list/src';
+
+export default {
+ title: 'Components/Collapse',
+ component: VCollapse,
+ args: {},
+};
+
+export const Default: Story<{}> = (args) => ({
+ components: { VCollapse, VBtn },
+ setup() {
+ const isOpen = ref(false);
+
+ return { args, isOpen };
+ },
+ template: `
+ Toggle
+
+ Anim eiusmod ea nostrud do incididunt consequat duis adipisicing reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui. Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est pariatur qui amet cupidatat magna est adipisicing quis ea ea.
+
+ `,
+});
+
+export const ExpandedList: Story<{}> = (args) => ({
+ components: { VCollapse, VList, VListItem, VListItemHeader },
+ setup() {
+ const items = ref([
+ {
+ question: 'What is Morpheme?',
+ answer: 'Morpheme is a collection of UI components for Vue 3.',
+ isOpen: true,
+ },
+ {
+ question: 'What is Vue 3?',
+ answer: 'Vue 3 is the latest version of the Vue framework.',
+ isOpen: false,
+ },
+ {
+ question: 'What is the difference between Vue 2 and Vue 3?',
+ answer: 'Vue 3 is faster and smaller than Vue 2.',
+ isOpen: false,
+ },
+ ]);
+
+ return { args, items };
+ },
+ template: `
+
+
+
+ {{ item.question }}
+
+
+ {{ item.answer }}
+
+
+
+ `,
+});
+
+export const Accordion: Story<{}> = (args) => ({
+ components: { VCollapse, VList, VListItem, VListItemHeader },
+ setup() {
+ const opened = ref(0);
+ const items = ref([
+ {
+ question: 'What is Morpheme?',
+ answer: 'Morpheme is a collection of UI components for Vue 3.',
+ },
+ {
+ question: 'What is Vue 3?',
+ answer: 'Vue 3 is the latest version of the Vue framework.',
+ },
+ {
+ question: 'What is the difference between Vue 2 and Vue 3?',
+ answer: 'Vue 3 is faster and smaller than Vue 2.',
+ },
+ ]);
+
+ return { args, opened, items };
+ },
+ template: `
+
+
+
+ {{ item.question }}
+
+
+ {{ item.answer }}
+
+
+
+ `,
+});
diff --git a/packages/collapsible/src/VCollapse.vue b/packages/ui/src/collapsible/src/VCollapse.vue
similarity index 96%
rename from packages/collapsible/src/VCollapse.vue
rename to packages/ui/src/collapsible/src/VCollapse.vue
index 337d69f2d..81e1adc5e 100644
--- a/packages/collapsible/src/VCollapse.vue
+++ b/packages/ui/src/collapsible/src/VCollapse.vue
@@ -1,105 +1,105 @@
-
- Open
-
- Open
+
+
-
-
+
+
+
+
+
+
diff --git a/packages/container/src/index.ts b/packages/ui/src/container/src/index.ts
similarity index 100%
rename from packages/container/src/index.ts
rename to packages/ui/src/container/src/index.ts
diff --git a/packages/icon/src/vue.d.ts b/packages/ui/src/container/src/vue.d.ts
similarity index 100%
rename from packages/icon/src/vue.d.ts
rename to packages/ui/src/container/src/vue.d.ts
diff --git a/packages/editor/tailwind.config.js b/packages/ui/src/container/tailwind.config.js
similarity index 100%
rename from packages/editor/tailwind.config.js
rename to packages/ui/src/container/tailwind.config.js
diff --git a/packages/editor/tsconfig.json b/packages/ui/src/container/tsconfig.json
similarity index 100%
rename from packages/editor/tsconfig.json
rename to packages/ui/src/container/tsconfig.json
diff --git a/packages/container/vite.config.js b/packages/ui/src/container/vite.config.js
similarity index 100%
rename from packages/container/vite.config.js
rename to packages/ui/src/container/vite.config.js
diff --git a/packages/divider/CHANGELOG.md b/packages/ui/src/divider/CHANGELOG.md
similarity index 100%
rename from packages/divider/CHANGELOG.md
rename to packages/ui/src/divider/CHANGELOG.md
diff --git a/packages/divider/README.md b/packages/ui/src/divider/README.md
similarity index 92%
rename from packages/divider/README.md
rename to packages/ui/src/divider/README.md
index 67d12f782..ae2523bdf 100644
--- a/packages/divider/README.md
+++ b/packages/ui/src/divider/README.md
@@ -1,49 +1,49 @@
-# Morpheme Divider
-
-Morpheme Divider Component.
-
-## Installation
-
-npm
-
-```
-npm i @morpheme/divider
-```
-
-yarn
-
-```
-yarn add @morpheme/divider
-```
-
-pnpm
-
-```
-pnpm i @morpheme/divider
-```
-
-## Usage
-
-```vue
-
-
-
-
- Jane
- Lily
- Mary
-
-
-```
-
-## Documentation
-
-Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-divider--default).
-
-## License
-
-MIT
+# Morpheme Divider
+
+Morpheme Divider Component.
+
+## Installation
+
+npm
+
+```
+npm i @morpheme/divider
+```
+
+yarn
+
+```
+yarn add @morpheme/divider
+```
+
+pnpm
+
+```
+pnpm i @morpheme/divider
+```
+
+## Usage
+
+```vue
+
+
+
+
+ Jane
+ Lily
+ Mary
+
+
+```
+
+## Documentation
+
+Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-divider--default).
+
+## License
+
+MIT
diff --git a/packages/divider/package.json b/packages/ui/src/divider/package.json
similarity index 100%
rename from packages/divider/package.json
rename to packages/ui/src/divider/package.json
diff --git a/packages/forms/postcss.config.js b/packages/ui/src/divider/postcss.config.js
similarity index 100%
rename from packages/forms/postcss.config.js
rename to packages/ui/src/divider/postcss.config.js
diff --git a/packages/divider/src/VDivider.stories.ts b/packages/ui/src/divider/src/VDivider.stories.ts
similarity index 79%
rename from packages/divider/src/VDivider.stories.ts
rename to packages/ui/src/divider/src/VDivider.stories.ts
index 5aa340fdc..f64b0cab0 100644
--- a/packages/divider/src/VDivider.stories.ts
+++ b/packages/ui/src/divider/src/VDivider.stories.ts
@@ -1,109 +1,109 @@
-import { VLogo } from '@morpheme/logo';
-import { VMain } from '@morpheme/app-shell';
-import { VBtn } from '@morpheme/button';
-import { VAppBar } from '@morpheme/app-bar';
-import type {StoryFn, Meta} from '@storybook/vue3';
-import VDivider from './VDivider.vue';
-import {List as VList, ListItem as VListItem} from '@morpheme/list';
-
-export default {
- title: 'Components/Divider',
- component: VDivider,
-} as Meta;
-
-export const Default: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VDivider,
- VList,
- VListItem
- },
- template: `
-
- Jane
- Lily
- Mary
-
- `,
-});
-
-export const Inset: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VDivider,
- VList,
- VListItem,
- VMain
- },
- template: `
-
- Jane
- Lily
- Mary
-
- `,
-});
-
-export const Vertical: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VDivider,
- VAppBar,
- VBtn,
- VLogo,
- VMain
- },
- template: `
-
-
-
-
- `,
-});
-
-export const DarkMode: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VDivider,
- VAppBar,
- VBtn,
- VLogo,
- VMain
- },
- template: `
-
+ Jane
+ Lily
+ Mary
+
+ `,
+});
+
+export const Inset: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VDivider,
+ VList,
+ VListItem,
+ VMain
+ },
+ template: `
+
+ Jane
+ Lily
+ Mary
+
+ `,
+});
+
+export const Vertical: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VDivider,
+ VAppBar,
+ VBtn,
+ VLogo,
+ VMain
+ },
+ template: `
+
+
+
+
+ `,
+});
+
+export const DarkMode: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VDivider,
+ VAppBar,
+ VBtn,
+ VLogo,
+ VMain
+ },
+ template: `
+
-
-
- Action
-
-
- Disabled
-
-
-
-`,
-});
-
-const placements = [
- 'top',
- 'top-start',
- 'top-end',
- 'bottom',
- 'bottom-start',
- 'bottom-end',
- 'right',
- 'right-start',
- 'right-end',
- 'left',
- 'left-start',
- 'left-end',
-];
-
-export const FloatingUI: StoryFn = (args, {argTypes}) => ({
- components: {Dropdown},
- setup() {
- return {args, argTypes, placements};
- },
- template: `
-
- Action
-
-
-
-
-
-
-
-
-
-
- `,
-});
-
-export const NavigationMenus: StoryFn = (args, {argTypes}) => ({
- components: {Dropdown, DropdownItem, DropdownButton, DropdownHeader},
- setup() {
- return {args, argTypes, DropdownItem};
- },
- template: `
-
+
+
+ Action
+
+
+ Disabled
+
+
+
+`,
+});
+
+const placements = [
+ 'top',
+ 'top-start',
+ 'top-end',
+ 'bottom',
+ 'bottom-start',
+ 'bottom-end',
+ 'right',
+ 'right-start',
+ 'right-end',
+ 'left',
+ 'left-start',
+ 'left-end',
+];
+
+export const FloatingUI: StoryFn = (args, { argTypes }) => ({
+ components: { Dropdown },
+ setup() {
+ return { args, argTypes, placements };
+ },
+ template: `
+
+ Action
+
+
+
+
+
+
+
+
+
+
+ `,
+});
+
+export const NavigationMenus: StoryFn = (args, { argTypes }) => ({
+ components: { Dropdown, DropdownItem, DropdownButton, DropdownHeader },
+ setup() {
+ return { args, argTypes, DropdownItem };
+ },
+ template: `
+
-
-
+
+
+
+
+
+
diff --git a/packages/dropdown/src/DropdownButton.vue b/packages/ui/src/dropdown/src/DropdownButton.vue
similarity index 90%
rename from packages/dropdown/src/DropdownButton.vue
rename to packages/ui/src/dropdown/src/DropdownButton.vue
index dc62944ab..a188bd5a1 100644
--- a/packages/dropdown/src/DropdownButton.vue
+++ b/packages/ui/src/dropdown/src/DropdownButton.vue
@@ -1,40 +1,40 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/packages/dropdown/src/DropdownHeader.vue b/packages/ui/src/dropdown/src/DropdownHeader.vue
similarity index 100%
rename from packages/dropdown/src/DropdownHeader.vue
rename to packages/ui/src/dropdown/src/DropdownHeader.vue
diff --git a/packages/dropdown/src/DropdownItem.vue b/packages/ui/src/dropdown/src/DropdownItem.vue
similarity index 98%
rename from packages/dropdown/src/DropdownItem.vue
rename to packages/ui/src/dropdown/src/DropdownItem.vue
index 8a1788c17..91f0ca89d 100644
--- a/packages/dropdown/src/DropdownItem.vue
+++ b/packages/ui/src/dropdown/src/DropdownItem.vue
@@ -1,7 +1,7 @@
-
-
- = (args) => ({
- components: {FormField},
- setup() {
- const email = ref('')
- const password = ref('')
- return {args, email, password};
- },
- template: `
-
-
-
-
-
-
- `,
-});
-
-export const ErrorState: StoryFn = (args) => ({
- components: {FormField},
- setup() {
- const email = ref('')
- const password = ref('')
- return {args, email, password};
- },
- template: `
-
-
-
- `,
-});
+import { ref } from 'vue';
+import FormField from './FormField.vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ title: 'Experimental/Forms/Field',
+ component: FormField,
+} as Meta;
+
+export const Default: StoryFn = (args) => ({
+ components: {FormField},
+ setup() {
+ const email = ref('')
+ const password = ref('')
+ return {args, email, password};
+ },
+ template: `
+
+
+
+
+
+
+ `,
+});
+
+export const ErrorState: StoryFn = (args) => ({
+ components: {FormField},
+ setup() {
+ const email = ref('')
+ const password = ref('')
+ return {args, email, password};
+ },
+ template: `
+
+
+
+ `,
+});
diff --git a/packages/forms/src/FormField.vue b/packages/ui/src/forms/src/FormField.vue
similarity index 94%
rename from packages/forms/src/FormField.vue
rename to packages/ui/src/forms/src/FormField.vue
index 73f7e6454..1302f6c76 100644
--- a/packages/forms/src/FormField.vue
+++ b/packages/ui/src/forms/src/FormField.vue
@@ -1,249 +1,249 @@
-
-
-
- ([]);
- const checkAll = computed({
- get() {
- return multiple.value.length === 3;
- },
- set(value) {
- multiple.value = value ? ['orange', 'apple', 'banana'] : [];
- },
- });
- return {args, single, multiple, checkAll};
- },
- template: `
- ([]);
+ const checkAll = computed({
+ get() {
+ return multiple.value.length === 3;
+ },
+ set(value) {
+ multiple.value = value ? ['orange', 'apple', 'banana'] : [];
+ },
+ });
+ return { args, single, multiple, checkAll };
+ },
+ template: `
+ = (args) => ({
- components: {VBtn, VCheckbox},
- setup() {
- const modelValue = ref('');
- const modelValue2 = ref('');
- const {handleSubmit, resetForm, values} = args.useForm
- ? useForm({})
- : {
- handleSubmit: (cb: any) => null,
- resetForm: () => null,
- values: {},
- };
-
- const onSubmit = handleSubmit((values: any) => {
- alert(JSON.stringify(values));
- });
-
- const onChange = (val: any) => {
- alert('onChange');
- };
-
- return {
- args,
- onSubmit,
- resetForm,
- values,
- modelValue,
- modelValue2,
- onChange,
- };
- },
- template: `
-
- `,
-});
-TestInputState.args = {
- useForm: false,
-};
-
-export const DarkMode: StoryFn = (args) => ({
- components: {VCheckbox},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
+ components: { VBtn, VCheckbox },
+ setup() {
+ const modelValue = ref('');
+ const modelValue2 = ref('');
+ const { handleSubmit, resetForm, values } = args.useForm
+ ? useForm({})
+ : {
+ handleSubmit: (cb: any) => null,
+ resetForm: () => null,
+ values: {},
+ };
+
+ const onSubmit = handleSubmit((values: any) => {
+ alert(JSON.stringify(values));
+ });
+
+ const onChange = (val: any) => {
+ alert('onChange');
+ };
+
+ return {
+ args,
+ onSubmit,
+ resetForm,
+ values,
+ modelValue,
+ modelValue2,
+ onChange,
+ };
+ },
+ template: `
+
+ `,
+});
+TestInputState.args = {
+ useForm: false,
+};
+
+export const DarkMode: StoryFn = (args) => ({
+ components: { VCheckbox },
+ setup() {
+ return { args };
+ },
+ template: `
+ ,
+ default: 'aggressive',
+ },
+ value: {
+ type: [String, Number, Boolean] as PropType,
+ default: false,
+ },
+ name: {
+ type: String,
+ default: '',
+ },
+ id: {
+ type: String,
+ default: '',
+ },
+ rules: {
+ type: String,
+ default: '',
+ },
+ wrapperClass: {
+ type: String,
+ default: '',
+ },
+ checkedValue: {
+ type: Boolean,
+ default: true,
+ },
+ uncheckedValue: {
+ type: Boolean,
+ default: false,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ /**
+ * @deprecated
+ */
+ disabledClass: {
+ type: String,
+ default: 'v-checkbox--disabled',
+ },
+ errorClass: {
+ type: String,
+ default: '',
+ },
+ labelClass: {
+ type: String,
+ default: '',
+ },
+ hideError: {
+ type: Boolean,
+ default: false,
+ },
+ hint: {
+ type: String,
+ default: '',
+ },
+});
+
+const emit = defineEmits<{
+ (e: 'update:modelValue', value: CheckboxValue): void;
+}>();
+
+const isEagerValidation = computed(() => {
+ return props.validationMode === 'eager';
+});
+
+const {errorMessage, uncontrolledValue, inputId, handleChange, handleBlur} =
+ useFormValue(props, emit, {
+ type: 'checkbox',
+ valueProp: props.value,
+ checkedValue: props.checkedValue,
+ uncheckedValue: props.uncheckedValue,
+ validateOnValueUpdate: !isEagerValidation.value,
+ });
+
+defineSlots<{
+ default?: (props: {}) => any;
+ hint?: (props: {}) => any;
+}>();
+
+
+
+
- Clear
-
-
-
- {{ files?.length ? 'Change' : 'Choose' }}
-
-
-
-
- Clear
-
-
-
-
-
- Clear
-
-
- {{ disabled ? 'Enable' : 'Disable' }}
-
-
-
-
-
- Clear
-
-
+ Clear
+
+
+
+ {{ files?.length ? 'Change' : 'Choose' }}
+
+
+
+
+ Clear
+
+
+
+
+
+ Clear
+
+
+ {{ disabled ? 'Enable' : 'Disable' }}
+
+
+
+
+
+ Clear
+
+ = (args) => ({
- components: {
- Select,
- },
- setup() {
- return {args};
- },
- template: ``,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = {
- docs: {
- source: {
- code: '',
- },
- },
-};
-
-export const DefaultValue = Template.bind({});
-DefaultValue.args = {
- modelValue: 2,
-};
-
-export const OptionGroup = Template.bind({});
-OptionGroup.args = {
- options: groupItems,
-};
-
-export const VModel: StoryFn = (args) => ({
- components: {
- Select,
- },
- setup() {
- const value = ref('');
- return {args, value};
- },
- template: `
-
- = (args) => ({
+ components: {
+ Select,
+ },
+ setup() {
+ return { args };
+ },
+ template: ``,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+ docs: {
+ source: {
+ code: '',
+ },
+ },
+};
+
+export const DefaultValue = Template.bind({});
+DefaultValue.args = {
+ modelValue: 2,
+};
+
+export const OptionGroup = Template.bind({});
+OptionGroup.args = {
+ options: groupItems,
+};
+
+export const VModel: StoryFn = (args) => ({
+ components: {
+ Select,
+ },
+ setup() {
+ const value = ref('');
+ return { args, value };
+ },
+ template: `
+
+ = (args) => ({
- components: {
- VFormSelect,
- },
- setup() {
- return {args};
- },
- template: ` = (args) => ({
- components: {VBtn, VFormSelect},
- setup() {
- const modelValue = ref();
- const modelValue2 = ref();
- const {handleSubmit, resetForm, values} = args.useForm
- ? useForm({
- initialValues: {
- choice: '',
- choice2: '',
- },
- })
- : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}};
-
- const items = ref([
- {
- text: 'Water',
- value: 'water',
- },
- {
- text: 'Earth',
- value: 'earth',
- },
- {
- text: 'Fire',
- value: 'fire',
- },
- {
- text: 'Wind',
- value: 'wind',
- },
- ]);
-
- const onSubmit = handleSubmit((values: any) => {
- alert(JSON.stringify(values));
- });
-
- const onChange = (val: any) => {
- alert('onChange: ' + val);
- };
-
- return {
- args,
- onSubmit,
- resetForm,
- values,
- modelValue,
- modelValue2,
- items,
- onChange,
- };
- },
- template: `
-
- `,
-});
-TestInputState.args = {
- useForm: false,
-};
-
-export const DarkMode: StoryFn = (args) => ({
- components: {VFormSelect},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
+ components: {
+ VFormSelect,
+ },
+ setup() {
+ return { args };
+ },
+ template: ` = (args) => ({
+ components: { VBtn, VFormSelect },
+ setup() {
+ const modelValue = ref();
+ const modelValue2 = ref();
+ const { handleSubmit, resetForm, values } = args.useForm
+ ? useForm({
+ initialValues: {
+ choice: '',
+ choice2: '',
+ },
+ })
+ : { handleSubmit: (cb: any) => null, resetForm: () => null, values: {} };
+
+ const items = ref([
+ {
+ text: 'Water',
+ value: 'water',
+ },
+ {
+ text: 'Earth',
+ value: 'earth',
+ },
+ {
+ text: 'Fire',
+ value: 'fire',
+ },
+ {
+ text: 'Wind',
+ value: 'wind',
+ },
+ ]);
+
+ const onSubmit = handleSubmit((values: any) => {
+ alert(JSON.stringify(values));
+ });
+
+ const onChange = (val: any) => {
+ alert('onChange: ' + val);
+ };
+
+ return {
+ args,
+ onSubmit,
+ resetForm,
+ values,
+ modelValue,
+ modelValue2,
+ items,
+ onChange,
+ };
+ },
+ template: `
+
+ `,
+});
+TestInputState.args = {
+ useForm: false,
+};
+
+export const DarkMode: StoryFn = (args) => ({
+ components: { VFormSelect },
+ setup() {
+ return { args };
+ },
+ template: `
+ = (args) => ({
- components: {VInput},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- const value = ref('');
- return {args, value};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- return {args, themeColors};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- const showAlert = (message: string) => {
- alert(message);
- };
-
- return {args, showAlert};
- },
- template: `
- = (args) => ({
- components: {VInput, Icon, VBtn},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- return {args, sizes};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- const value = ref('');
- return {args, value};
- },
- template: `
- = (args) => ({
- components: {InputField, VBtn},
- setup() {
- const schema = object({
- name: string().required().label('Name'),
- email: string().required().email().label('Email'),
- });
-
- const {handleSubmit, resetForm, values, errors} = useForm({
- validationSchema: schema,
- });
-
- const onSubmit = handleSubmit((values) => {
- alert(JSON.stringify(values));
- });
-
- return {onSubmit, resetForm, values, errors};
- },
- template: `
-
-`,
-});
-
-export const InputTypes: Story = (args) => ({
- components: {InputField, VBtn},
- setup() {
- const types = [
- 'text',
- 'password',
- 'email',
- 'number',
- 'url',
- 'tel',
- 'search',
- 'color',
- 'date',
- 'month',
- 'week',
- 'time',
- 'datetime-local',
- 'checkbox',
- 'range',
- 'file',
- ]
- const {values} = useForm({});
- return {args, types, values};
- },
- template: `
-
-`,
-});
-
-// dark mode VInput story
-export const DarkMode: Story = (args) => ({
- components: {VInput},
- setup() {
- const modelValue = ref('');
- return {args, modelValue};
- },
- template: `
- = (args) => ({
+ components: { VInput },
+ setup() {
+ return { args };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ const value = ref('');
+ return { args, value };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ return { args, themeColors };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ const showAlert = (message: string) => {
+ alert(message);
+ };
+
+ return { args, showAlert };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput, Icon, VBtn },
+ setup() {
+ return { args };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ return { args, sizes };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ const value = ref('');
+ return { args, value };
+ },
+ template: `
+ = (args) => ({
+ components: { InputField, VBtn },
+ setup() {
+ const schema = object({
+ name: string().required().label('Name'),
+ email: string().required().email().label('Email'),
+ });
+
+ const { handleSubmit, resetForm, values, errors } = useForm({
+ validationSchema: schema,
+ });
+
+ const onSubmit = handleSubmit((values) => {
+ alert(JSON.stringify(values));
+ });
+
+ return { onSubmit, resetForm, values, errors };
+ },
+ template: `
+
+`,
+});
+
+export const InputTypes: Story = (args) => ({
+ components: { InputField, VBtn },
+ setup() {
+ const types = [
+ 'text',
+ 'password',
+ 'email',
+ 'number',
+ 'url',
+ 'tel',
+ 'search',
+ 'color',
+ 'date',
+ 'month',
+ 'week',
+ 'time',
+ 'datetime-local',
+ 'checkbox',
+ 'range',
+ 'file',
+ ]
+ const { values } = useForm({});
+ return { args, types, values };
+ },
+ template: `
+
+`,
+});
+
+// dark mode VInput story
+export const DarkMode: Story = (args) => ({
+ components: { VInput },
+ setup() {
+ const modelValue = ref('');
+ return { args, modelValue };
+ },
+ template: `
+ = (args) => ({
- components: {VInput},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- return {args, themeColors};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- const showAlert = (message: string) => {
- alert(message);
- };
-
- return {args, showAlert};
- },
- template: `
- = (args) => ({
- components: {VInput, Icon, VBtn},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- return {args, sizes};
- },
- template: `
- = (args) => ({
- components: {VInput},
- setup() {
- const value = ref('');
- return {args, value};
- },
- template: `
- = (args) => ({
- components: {VInput, VBtn},
- setup() {
- const schema = object({
- name: string().required().label('Name'),
- email: string().required().email().label('Email'),
- });
-
- const {handleSubmit, resetForm} = useForm({
- validationSchema: schema,
- });
-
- const onSubmit = handleSubmit((values) => {
- alert(JSON.stringify(values));
- });
-
- return {onSubmit, resetForm};
- },
- template: `
-
-`,
-});
-
-export const ValidationMode: Story = (args) => ({
- components: {VInput, VBtn},
- setup() {
- const schema = object({
- name_eager: string().required().label('Name'),
- email_eager: string().required().email().label('Email'),
- name_aggressive: string().required().label('Name'),
- email_aggressive: string().required().email().label('Email'),
- });
-
- const {handleSubmit, resetForm} = useForm({
- validationSchema: schema,
- });
-
- const modes = ref(['eager', 'aggressive']);
-
- const onSubmit = handleSubmit((values) => {
- alert(JSON.stringify(values));
- });
-
- return {modes, onSubmit, resetForm};
- },
- template: `
-
- `,
-});
-
-export const FieldArrays: Story = () => ({
- components: {FieldArrayStory},
- template: ` = () => ({
- components: {FieldArrayOfObject},
- template: ` = () => ({
- components: {FieldArrayNestedComponent},
- template: ` = () => ({
- components: {FormsPlaygroundComponent},
- template: ` = (args) => ({
- components: {VBtn, VInput},
- setup() {
- const modelValue = ref('');
- const modelValue2 = ref('');
- const initialValues = ref({
- text: args.setupWithInitialValue ? 'init' : '',
- text2: args.setupWithInitialValue ? 'init2' : '',
- });
-
- const {handleSubmit, resetForm, values} = args.useForm
- ? useForm({
- initialValues,
- })
- : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}};
-
- const onSubmit = handleSubmit((values: any) => {
- alert(JSON.stringify(values));
- });
-
- const onChange = (val: any) => {
- alert('onChange: ' + val);
- };
-
- const resetVVForm = () => {
- if (!args.useForm) {
- alert(
- 'Story is not set up with Vee Validate Form. set `useForm` control to true to try this action.',
- );
- }
-
- initialValues.value = {
- text: 'changes',
- text2: 'change me too!',
- };
-
- resetForm();
- };
-
- return {
- args,
- onSubmit,
- resetForm,
- values,
- modelValue,
- modelValue2,
- onChange,
- resetVVForm,
- };
- },
- template: `
-
- `,
-});
-TestInputState.args = {
- useForm: false,
- setupWithInitialValue: false,
- value: undefined,
- clearable: true,
-};
-
-// dark mode VInput story
-export const DarkMode: Story = (args) => ({
- components: {VInput},
- setup() {
- const modelValue = ref('');
- return {args, modelValue};
- },
- template: `
- = (args) => ({
+ components: { VInput },
+ setup() {
+ return { args };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ return { args, themeColors };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ const showAlert = (message: string) => {
+ alert(message);
+ };
+
+ return { args, showAlert };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput, Icon, VBtn },
+ setup() {
+ return { args };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ return { args, sizes };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput },
+ setup() {
+ const value = ref('');
+ return { args, value };
+ },
+ template: `
+ = (args) => ({
+ components: { VInput, VBtn },
+ setup() {
+ const schema = object({
+ name: string().required().label('Name'),
+ email: string().required().email().label('Email'),
+ });
+
+ const { handleSubmit, resetForm } = useForm({
+ validationSchema: schema,
+ });
+
+ const onSubmit = handleSubmit((values) => {
+ alert(JSON.stringify(values));
+ });
+
+ return { onSubmit, resetForm };
+ },
+ template: `
+
+`,
+});
+
+export const ValidationMode: Story = (args) => ({
+ components: { VInput, VBtn },
+ setup() {
+ const schema = object({
+ name_eager: string().required().label('Name'),
+ email_eager: string().required().email().label('Email'),
+ name_aggressive: string().required().label('Name'),
+ email_aggressive: string().required().email().label('Email'),
+ });
+
+ const { handleSubmit, resetForm } = useForm({
+ validationSchema: schema,
+ });
+
+ const modes = ref(['eager', 'aggressive']);
+
+ const onSubmit = handleSubmit((values) => {
+ alert(JSON.stringify(values));
+ });
+
+ return { modes, onSubmit, resetForm };
+ },
+ template: `
+
+ `,
+});
+
+export const FieldArrays: Story = () => ({
+ components: { FieldArrayStory },
+ template: ` = () => ({
+ components: { FieldArrayOfObject },
+ template: ` = () => ({
+ components: { FieldArrayNestedComponent },
+ template: ` = () => ({
+ components: { FormsPlaygroundComponent },
+ template: ` = (args) => ({
+ components: { VBtn, VInput },
+ setup() {
+ const modelValue = ref('');
+ const modelValue2 = ref('');
+ const initialValues = ref({
+ text: args.setupWithInitialValue ? 'init' : '',
+ text2: args.setupWithInitialValue ? 'init2' : '',
+ });
+
+ const { handleSubmit, resetForm, values } = args.useForm
+ ? useForm({
+ initialValues,
+ })
+ : { handleSubmit: (cb: any) => null, resetForm: () => null, values: {} };
+
+ const onSubmit = handleSubmit((values: any) => {
+ alert(JSON.stringify(values));
+ });
+
+ const onChange = (val: any) => {
+ alert('onChange: ' + val);
+ };
+
+ const resetVVForm = () => {
+ if (!args.useForm) {
+ alert(
+ 'Story is not set up with Vee Validate Form. set `useForm` control to true to try this action.',
+ );
+ }
+
+ initialValues.value = {
+ text: 'changes',
+ text2: 'change me too!',
+ };
+
+ resetForm();
+ };
+
+ return {
+ args,
+ onSubmit,
+ resetForm,
+ values,
+ modelValue,
+ modelValue2,
+ onChange,
+ resetVVForm,
+ };
+ },
+ template: `
+
+ `,
+});
+TestInputState.args = {
+ useForm: false,
+ setupWithInitialValue: false,
+ value: undefined,
+ clearable: true,
+};
+
+// dark mode VInput story
+export const DarkMode: Story = (args) => ({
+ components: { VInput },
+ setup() {
+ const modelValue = ref('');
+ return { args, modelValue };
+ },
+ template: `
+
-
- `,
-});
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { useForm } from 'vee-validate';
+import { ref } from 'vue';
+import { object } from 'yup';
+import VInputRange from './VInputRange.vue';
+import VBtn from '../../../button/src';
+
+export default {
+ title: 'Forms/InputRange',
+ component: VInputRange,
+ argTypes: {},
+ args: {
+ min: 0,
+ max: 100,
+ },
+} as Meta;
+
+export const Default: StoryFn = (args) => ({
+ components: { VInputRange },
+ setup() {
+ const val = ref('');
+ return { args, val };
+ },
+ template: '
+
+ `,
+});
diff --git a/packages/forms/src/input/VInputRange.vue b/packages/ui/src/forms/src/input/VInputRange.vue
similarity index 95%
rename from packages/forms/src/input/VInputRange.vue
rename to packages/ui/src/forms/src/input/VInputRange.vue
index 9bf0eeb1e..b6445d12d 100644
--- a/packages/forms/src/input/VInputRange.vue
+++ b/packages/ui/src/forms/src/input/VInputRange.vue
@@ -1,296 +1,296 @@
-
-
-
- = (args) => ({
- components: {VBtn, VRadio},
- setup() {
- const modelValue = ref();
- const modelValue2 = ref();
- const {handleSubmit, resetForm, values} = args.useForm
- ? useForm({
- initialValues: {
- radio: false,
- radio2: false,
- },
- })
- : {
- handleSubmit: (cb: any) => null,
- resetForm: () => null,
- values: {},
- };
-
- const onSubmit = handleSubmit((values: any) => {
- alert(JSON.stringify(values));
- });
-
- const onChange = (val: any) => {
- alert('onChange');
- };
-
- return {
- args,
- onSubmit,
- resetForm,
- values,
- modelValue,
- modelValue2,
- onChange,
- };
- },
- template: `
-
- `,
-});
-TestInputState.args = {
- useForm: false,
-};
-
-// VRadio dark mode
-export const DarkMode: StoryFn<{}> = () => ({
- components: {VRadio},
- setup() {
- const value = ref('1');
- return {value};
- },
- template: `
- = (args) => ({
+ components: { VBtn, VRadio },
+ setup() {
+ const modelValue = ref();
+ const modelValue2 = ref();
+ const { handleSubmit, resetForm, values } = args.useForm
+ ? useForm({
+ initialValues: {
+ radio: false,
+ radio2: false,
+ },
+ })
+ : {
+ handleSubmit: (cb: any) => null,
+ resetForm: () => null,
+ values: {},
+ };
+
+ const onSubmit = handleSubmit((values: any) => {
+ alert(JSON.stringify(values));
+ });
+
+ const onChange = (val: any) => {
+ alert('onChange');
+ };
+
+ return {
+ args,
+ onSubmit,
+ resetForm,
+ values,
+ modelValue,
+ modelValue2,
+ onChange,
+ };
+ },
+ template: `
+
+ `,
+});
+TestInputState.args = {
+ useForm: false,
+};
+
+// VRadio dark mode
+export const DarkMode: StoryFn<{}> = () => ({
+ components: { VRadio },
+ setup() {
+ const value = ref('1');
+ return { value };
+ },
+ template: `
+ = (args) => ({
- components: {VBtn, VRadioGroup},
- setup() {
- const items = ['fire', 'earth', 'wind', 'water'];
-
- const modelValue = ref();
- const modelValue2 = ref();
- const {handleSubmit, resetForm, values} = args.useForm
- ? useForm({
- initialValues: {
- radio: '',
- radio2: '',
- },
- })
- : {
- handleSubmit: (cb: any) => null,
- resetForm: () => null,
- values: {},
- };
-
- const onSubmit = handleSubmit((values: any) => {
- alert(JSON.stringify(values));
- });
-
- const onChange = (val: any) => {
- alert('onChange');
- };
-
- return {
- args,
- onSubmit,
- resetForm,
- values,
- items,
- modelValue,
- modelValue2,
- onChange,
- };
- },
- template: `
-
- `,
-});
-TestInputState.args = {
- useForm: false,
-};
-
-export const DarkMode: StoryFn = (args) => ({
- components: {VRadioGroup},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
+ components: { VBtn, VRadioGroup },
+ setup() {
+ const items = ['fire', 'earth', 'wind', 'water'];
+
+ const modelValue = ref();
+ const modelValue2 = ref();
+ const { handleSubmit, resetForm, values } = args.useForm
+ ? useForm({
+ initialValues: {
+ radio: '',
+ radio2: '',
+ },
+ })
+ : {
+ handleSubmit: (cb: any) => null,
+ resetForm: () => null,
+ values: {},
+ };
+
+ const onSubmit = handleSubmit((values: any) => {
+ alert(JSON.stringify(values));
+ });
+
+ const onChange = (val: any) => {
+ alert('onChange');
+ };
+
+ return {
+ args,
+ onSubmit,
+ resetForm,
+ values,
+ items,
+ modelValue,
+ modelValue2,
+ onChange,
+ };
+ },
+ template: `
+
+ `,
+});
+TestInputState.args = {
+ useForm: false,
+};
+
+export const DarkMode: StoryFn = (args) => ({
+ components: { VRadioGroup },
+ setup() {
+ return { args };
+ },
+ template: `
+ Column 1
- Column 2
- Column 3
- `,
- },
- });
-
- expect(wrapper.find('.v-row').exists()).toBe(true);
-});
-
-test('VCol renders correctly with cols prop', () => {
- const wrapper = mount(VCol, {
- slots: {
- default: 'This is a column',
- },
- props: {
- cols: '6',
- },
- });
-
- expect(wrapper.find('.v-col-6').exists()).toBe(true);
- expect(wrapper.text()).toBe('This is a column');
- expect(wrapper.classes()).toContain('v-col-6');
-});
-
-test('VCol renders correctly with offset prop', () => {
- const wrapper = mount(VCol, {
- slots: {
- default: 'This is a column',
- },
- props: {
- cols: '6',
- offset: '3',
- },
- });
-
- expect(wrapper.classes()).toContain('v-offset-3');
-});
-
-test('VCol renders correctly with order prop', () => {
- const wrapper = mount(VCol, {
- slots: {
- default: 'This is a column',
- },
- props: {
- cols: '6',
- order: '2',
- },
- });
-
- expect(wrapper.classes()).toContain('v-order-2');
-});
+import { mount } from '@vue/test-utils';
+import VRow from './VRow.vue'
+import VCol from './VCol.vue'
+
+test('VRow renders correctly', () => {
+ const wrapper = mount(VRow, {
+ slots: {
+ default: `
+ Column 1
+ Column 2
+ Column 3
+ `,
+ },
+ });
+
+ expect(wrapper.find('.v-row').exists()).toBe(true);
+});
+
+test('VCol renders correctly with cols prop', () => {
+ const wrapper = mount(VCol, {
+ slots: {
+ default: 'This is a column',
+ },
+ props: {
+ cols: '6',
+ },
+ });
+
+ expect(wrapper.find('.v-col-6').exists()).toBe(true);
+ expect(wrapper.text()).toBe('This is a column');
+ expect(wrapper.classes()).toContain('v-col-6');
+});
+
+test('VCol renders correctly with offset prop', () => {
+ const wrapper = mount(VCol, {
+ slots: {
+ default: 'This is a column',
+ },
+ props: {
+ cols: '6',
+ offset: '3',
+ },
+ });
+
+ expect(wrapper.classes()).toContain('v-offset-3');
+});
+
+test('VCol renders correctly with order prop', () => {
+ const wrapper = mount(VCol, {
+ slots: {
+ default: 'This is a column',
+ },
+ props: {
+ cols: '6',
+ order: '2',
+ },
+ });
+
+ expect(wrapper.classes()).toContain('v-order-2');
+});
diff --git a/packages/layouts/src/Grid.stories.ts b/packages/ui/src/layouts/src/Grid.stories.ts
similarity index 83%
rename from packages/layouts/src/Grid.stories.ts
rename to packages/ui/src/layouts/src/Grid.stories.ts
index 785c5ec75..12ecad628 100644
--- a/packages/layouts/src/Grid.stories.ts
+++ b/packages/ui/src/layouts/src/Grid.stories.ts
@@ -1,237 +1,237 @@
-import {VSelect} from '@morpheme/select';
-import {alignItems, flexWrap, justifyContent} from './grid';
-import {VCard} from '@morpheme/card';
-import type {StoryFn} from '@storybook/vue3';
-import VRow from './VRow.vue';
-import VCol from './VCol.vue';
-import {reactive, ref} from 'vue';
-
-export default {
- title: 'Components/Grid',
- component: VRow,
-};
-
-export const Default: StoryFn = (args) => ({
- components: {VRow, VCol},
- setup() {
- return {args};
- },
- template: `
-
-
- {{ i }}
-
-
- `,
-});
-
-export const Cols: StoryFn = (args) => ({
- components: {VRow, VCol},
- setup() {
- return {args};
- },
- template: `
-
-
- 1
-
-
- 3
-
-
- 8
-
-
- `,
-});
-
-export const Offset: StoryFn = (args) => ({
- components: {VRow, VCol},
- setup() {
- return {args};
- },
- template: `
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- `,
-});
-
-export const Order: StoryFn = (args) => ({
- components: {VRow, VCol},
- setup() {
- return {args};
- },
- template: `
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- `,
-});
-
-function toItems(obj: any) {
- return Object.keys(obj).map((key) => ({
- text: obj[key],
- value: key,
- }));
-}
-
-export const Wrap: StoryFn = (args) => ({
- components: {VRow, VCol, VSelect},
- setup() {
- const wrap = ref('');
- return {
- args,
- wrap,
- wrapItems: toItems(flexWrap),
- };
- },
- template: `
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- `,
-});
-
-export const Alignment: StoryFn = (args) => ({
- components: {VRow, VCol, VSelect},
- setup() {
- const option = reactive({
- align: 'center',
- alignContent: 'center',
- justifyContent: 'center',
- });
-
- return {
- args,
- alignItems: toItems(alignItems),
- justifyContent: toItems(justifyContent),
- alignContent: toItems(justifyContent),
- option,
- };
- },
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
-
- 2
-
-
- 3
-
-
- `,
-});
-
-export const Responsive: StoryFn = (args) => ({
- components: {VRow, VCol, VCard},
- setup() {
- return {args};
- },
- template: `
-
-
-
-
-
-
-
-
- `,
-});
-
-export const LayoutExample: StoryFn = (args) => ({
- components: {VRow, VCol, VCard},
- setup() {
- const stats = [
- {
- title: 'Total Subscribers',
- value: '71,897',
- color: '',
- },
- {
- title: 'Avg. Open Rate',
- value: '58.16%',
- },
- {
- title: 'Avg. Click Rate',
- value: '24.57%',
- },
- {
- title: 'Avg. Bounce Rate',
- value: '4.24%',
- },
- ];
- return {args, stats};
- },
- template: `
-
-
-
-
-
-
- `,
-});
+import { VSelect } from '../../select/src';
+import { alignItems, flexWrap, justifyContent } from './grid';
+import { VCard } from '../../card/src';
+import type { StoryFn } from '@storybook/vue3';
+import VRow from './VRow.vue';
+import VCol from './VCol.vue';
+import { reactive, ref } from 'vue';
+
+export default {
+ title: 'Components/Grid',
+ component: VRow,
+};
+
+export const Default: StoryFn = (args) => ({
+ components: { VRow, VCol },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ {{ i }}
+
+
+ `,
+});
+
+export const Cols: StoryFn = (args) => ({
+ components: { VRow, VCol },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ 1
+
+
+ 3
+
+
+ 8
+
+
+ `,
+});
+
+export const Offset: StoryFn = (args) => ({
+ components: { VRow, VCol },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ `,
+});
+
+export const Order: StoryFn = (args) => ({
+ components: { VRow, VCol },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ `,
+});
+
+function toItems(obj: any) {
+ return Object.keys(obj).map((key) => ({
+ text: obj[key],
+ value: key,
+ }));
+}
+
+export const Wrap: StoryFn = (args) => ({
+ components: { VRow, VCol, VSelect },
+ setup() {
+ const wrap = ref('');
+ return {
+ args,
+ wrap,
+ wrapItems: toItems(flexWrap),
+ };
+ },
+ template: `
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ `,
+});
+
+export const Alignment: StoryFn = (args) => ({
+ components: { VRow, VCol, VSelect },
+ setup() {
+ const option = reactive({
+ align: 'center',
+ alignContent: 'center',
+ justifyContent: 'center',
+ });
+
+ return {
+ args,
+ alignItems: toItems(alignItems),
+ justifyContent: toItems(justifyContent),
+ alignContent: toItems(justifyContent),
+ option,
+ };
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2
+
+
+ 3
+
+
+ `,
+});
+
+export const Responsive: StoryFn = (args) => ({
+ components: { VRow, VCol, VCard },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
+
+
+
+
+ `,
+});
+
+export const LayoutExample: StoryFn = (args) => ({
+ components: { VRow, VCol, VCard },
+ setup() {
+ const stats = [
+ {
+ title: 'Total Subscribers',
+ value: '71,897',
+ color: '',
+ },
+ {
+ title: 'Avg. Open Rate',
+ value: '58.16%',
+ },
+ {
+ title: 'Avg. Click Rate',
+ value: '24.57%',
+ },
+ {
+ title: 'Avg. Bounce Rate',
+ value: '4.24%',
+ },
+ ];
+ return { args, stats };
+ },
+ template: `
+
+
+
+
+
+
+ `,
+});
diff --git a/packages/layouts/src/SidebarMenu.spects b/packages/ui/src/layouts/src/SidebarMenu.spects
similarity index 100%
rename from packages/layouts/src/SidebarMenu.spects
rename to packages/ui/src/layouts/src/SidebarMenu.spects
diff --git a/packages/layouts/src/SidebarMenu.vue b/packages/ui/src/layouts/src/SidebarMenu.vue
similarity index 100%
rename from packages/layouts/src/SidebarMenu.vue
rename to packages/ui/src/layouts/src/SidebarMenu.vue
diff --git a/packages/layouts/src/VCol.vue b/packages/ui/src/layouts/src/VCol.vue
similarity index 100%
rename from packages/layouts/src/VCol.vue
rename to packages/ui/src/layouts/src/VCol.vue
diff --git a/packages/layouts/src/VRow.vue b/packages/ui/src/layouts/src/VRow.vue
similarity index 100%
rename from packages/layouts/src/VRow.vue
rename to packages/ui/src/layouts/src/VRow.vue
diff --git a/packages/layouts/src/grid.ts b/packages/ui/src/layouts/src/grid.ts
similarity index 100%
rename from packages/layouts/src/grid.ts
rename to packages/ui/src/layouts/src/grid.ts
diff --git a/packages/layouts/src/index.ts b/packages/ui/src/layouts/src/index.ts
similarity index 98%
rename from packages/layouts/src/index.ts
rename to packages/ui/src/layouts/src/index.ts
index e54db3170..a390de965 100644
--- a/packages/layouts/src/index.ts
+++ b/packages/ui/src/layouts/src/index.ts
@@ -1,8 +1,8 @@
-export {default as Auth} from './Auth.vue';
-export {default as Base} from './Base.vue';
-export {default} from './Default.vue';
-export {default as Default} from './Default.vue';
-export {default as SidebarMenu} from './SidebarMenu.vue';
-export * from './grid'
-export {default as VRow} from './VRow.vue';
+export {default as Auth} from './Auth.vue';
+export {default as Base} from './Base.vue';
+export {default} from './Default.vue';
+export {default as Default} from './Default.vue';
+export {default as SidebarMenu} from './SidebarMenu.vue';
+export * from './grid'
+export {default as VRow} from './VRow.vue';
export {default as VCol} from './VCol.vue';
\ No newline at end of file
diff --git a/packages/menus/src/vue.d.ts b/packages/ui/src/layouts/src/vue.d.ts
similarity index 100%
rename from packages/menus/src/vue.d.ts
rename to packages/ui/src/layouts/src/vue.d.ts
diff --git a/packages/menu/tailwind.config.js b/packages/ui/src/layouts/tailwind.config.js
similarity index 100%
rename from packages/menu/tailwind.config.js
rename to packages/ui/src/layouts/tailwind.config.js
diff --git a/packages/menu/tsconfig.json b/packages/ui/src/layouts/tsconfig.json
similarity index 100%
rename from packages/menu/tsconfig.json
rename to packages/ui/src/layouts/tsconfig.json
diff --git a/packages/layouts/vite.config.js b/packages/ui/src/layouts/vite.config.js
similarity index 95%
rename from packages/layouts/vite.config.js
rename to packages/ui/src/layouts/vite.config.js
index 26fca8606..40c9e401a 100644
--- a/packages/layouts/vite.config.js
+++ b/packages/ui/src/layouts/vite.config.js
@@ -1,42 +1,42 @@
-import {defineConfig} from 'vite';
-import vue from '@vitejs/plugin-vue';
-import {resolve} from 'path';
-
-// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [vue()],
- esbuild: {
- exclude: ['./src/**/**.stories.ts'],
- },
- build: {
- target: 'esnext',
- lib: {
- entry: resolve(__dirname, 'src/index.ts'),
- name: 'VLayouts',
- formats: ['es', 'cjs', 'iife', 'umd'],
- },
- rollupOptions: {
- // make sure to externalize deps that shouldn't be bundled
- // into your library
- external: [
- 'vue',
- 'vee-validate',
- '@morpheme/utils',
- '@headlessui/vue',
- '@morpheme/icon',
- '@morpheme/utils',
- '@morpheme/design-tokens'
- ],
- output: {
- // Provide global variables to use in the UMD build
- // for externalized deps
- globals: {
- vue: 'Vue',
- },
- },
- resolve: {
- dedupe: 'vue',
- },
- },
- },
-});
+import {defineConfig} from 'vite';
+import vue from '@vitejs/plugin-vue';
+import {resolve} from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+ esbuild: {
+ exclude: ['./src/**/**.stories.ts'],
+ },
+ build: {
+ target: 'esnext',
+ lib: {
+ entry: resolve(__dirname, 'src/index.ts'),
+ name: 'VLayouts',
+ formats: ['es', 'cjs', 'iife', 'umd'],
+ },
+ rollupOptions: {
+ // make sure to externalize deps that shouldn't be bundled
+ // into your library
+ external: [
+ 'vue',
+ 'vee-validate',
+ '@morpheme/utils',
+ '@headlessui/vue',
+ '@morpheme/icon',
+ '@morpheme/utils',
+ '@morpheme/design-tokens'
+ ],
+ output: {
+ // Provide global variables to use in the UMD build
+ // for externalized deps
+ globals: {
+ vue: 'Vue',
+ },
+ },
+ resolve: {
+ dedupe: 'vue',
+ },
+ },
+ },
+});
diff --git a/packages/list/CHANGELOG.md b/packages/ui/src/list/CHANGELOG.md
similarity index 100%
rename from packages/list/CHANGELOG.md
rename to packages/ui/src/list/CHANGELOG.md
diff --git a/packages/list/README.md b/packages/ui/src/list/README.md
similarity index 100%
rename from packages/list/README.md
rename to packages/ui/src/list/README.md
diff --git a/packages/list/package.json b/packages/ui/src/list/package.json
similarity index 100%
rename from packages/list/package.json
rename to packages/ui/src/list/package.json
diff --git a/packages/menus/postcss.config.js b/packages/ui/src/list/postcss.config.js
similarity index 100%
rename from packages/menus/postcss.config.js
rename to packages/ui/src/list/postcss.config.js
diff --git a/packages/list/src/Changelog.stories.mdx b/packages/ui/src/list/src/Changelog.stories.mdx
similarity index 100%
rename from packages/list/src/Changelog.stories.mdx
rename to packages/ui/src/list/src/Changelog.stories.mdx
diff --git a/packages/list/src/List.dark.scss b/packages/ui/src/list/src/List.dark.scss
similarity index 100%
rename from packages/list/src/List.dark.scss
rename to packages/ui/src/list/src/List.dark.scss
diff --git a/packages/list/src/List.scss b/packages/ui/src/list/src/List.scss
similarity index 100%
rename from packages/list/src/List.scss
rename to packages/ui/src/list/src/List.scss
diff --git a/packages/list/src/List.spec.ts b/packages/ui/src/list/src/List.spec.ts
similarity index 100%
rename from packages/list/src/List.spec.ts
rename to packages/ui/src/list/src/List.spec.ts
diff --git a/packages/list/src/List.stories.ts b/packages/ui/src/list/src/List.stories.ts
similarity index 92%
rename from packages/list/src/List.stories.ts
rename to packages/ui/src/list/src/List.stories.ts
index 3a21db084..44257b115 100644
--- a/packages/list/src/List.stories.ts
+++ b/packages/ui/src/list/src/List.stories.ts
@@ -1,1120 +1,1120 @@
-import {VSelect} from '@morpheme/select';
-import VAvatar from '@morpheme/avatar';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {Icon} from '@iconify/vue';
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-import ListItemDivider from './ListItemDivider.vue';
-import ListItemHeader from './ListItemHeader.vue';
-import ListCollapse from './ListCollapse.vue';
-import {ref} from 'vue';
-import {NavDrawer as VNavDrawer} from '@morpheme/nav-drawer';
-import VBtn from '@morpheme/button';
-import {Dropdown} from '@morpheme/dropdown';
-import ListItemTitle from './ListItemTitle.vue';
-import ListItemSubTitle from './ListItemSubTitle.vue';
-import ListItemContent from './ListItemContent.vue';
-
-const menus = ref([
- {
- title: 'Home',
- to: '/',
- prependIcon: 'ri:home-2-line',
- },
- {
- title: 'Blog',
- to: '/',
- prependIcon: 'ri:book-line',
- items: [
- {
- title: 'Posts',
- to: '/',
- },
- {
- title: 'Comments',
- to: '/',
- },
- ],
- },
- {
- title: 'Shop',
- to: '/',
- prependIcon: 'ri:user-line',
- items: [
- {
- title: 'Products',
- to: '/',
- },
- {
- title: 'Categories',
- to: '/',
- },
- ],
- },
- {
- title: 'Long Text Management Example',
- to: '/',
- prependIcon: 'ri:chat-2-line',
- },
-]);
-
-export default {
- title: 'Components/List',
- component: List,
- argTypes: {},
- args: {},
-} as Meta;
-
-export const BasicList: StoryFn = (args) => ({
- components: {
- List,
- ListItem,
- ListItemDivider,
- },
- setup() {
- return {args};
- },
- template: `
-
- {{ hideText ? 'Show' : 'Hide' }} Text
-
-
-
- `,
-});
-
-export const Event: StoryFn = (args) => ({
- components: {
- List,
- ListItem,
- ListItemDivider,
- },
- setup() {
- const showMessage = (message: string) => alert(`Clicked: ${message}`);
- return {args, showMessage};
- },
- template: `
-
-
-`,
-});
-
-export const ActiveState: StoryFn = (args) => ({
- components: {
- List,
- ListItem,
- ListItemDivider,
- Icon,
- ListItemHeader,
- VBtn,
- VSelect,
- },
- setup() {
- function toItems(options: string[]) {
- return options.map((item) => ({
- text: item,
- value: item,
- }));
- }
-
- const selected = ref();
- const activeVariant = ref('bordered');
- const activeBorderPosition = ref('left');
- const activeVariants = toItems(['filled', 'bordered', 'filled-bordered']);
- const borderPositions = toItems(['left', 'right', 'bottom', 'top']);
- return {
- args,
- selected,
- menus,
- activeVariants,
- activeVariant,
- activeBorderPosition,
- borderPositions,
- };
- },
- template: `
-
+ {{ hideText ? 'Show' : 'Hide' }} Text
+
+
+
+ `,
+});
+
+export const Event: StoryFn = (args) => ({
+ components: {
+ List,
+ ListItem,
+ ListItemDivider,
+ },
+ setup() {
+ const showMessage = (message: string) => alert(`Clicked: ${message}`);
+ return { args, showMessage };
+ },
+ template: `
+
+
+`,
+});
+
+export const ActiveState: StoryFn = (args) => ({
+ components: {
+ List,
+ ListItem,
+ ListItemDivider,
+ Icon,
+ ListItemHeader,
+ VBtn,
+ VSelect,
+ },
+ setup() {
+ function toItems(options: string[]) {
+ return options.map((item) => ({
+ text: item,
+ value: item,
+ }));
+ }
+
+ const selected = ref();
+ const activeVariant = ref('bordered');
+ const activeBorderPosition = ref('left');
+ const activeVariants = toItems(['filled', 'bordered', 'filled-bordered']);
+ const borderPositions = toItems(['left', 'right', 'bottom', 'top']);
+ return {
+ args,
+ selected,
+ menus,
+ activeVariants,
+ activeVariant,
+ activeBorderPosition,
+ borderPositions,
+ };
+ },
+ template: `
+ (), {
+ activeVariant: "filled",
+ activeBorderPosition: "bottom",
+});
+
+const apiProps = toRefs(props);
+
+const api: VListContextApi = {
+ ...apiProps,
+};
+
+provide(VListInjectionKey, api);
+
+const isBorderedVariant = computed(() => {
+ return ["bordered", "filled-bordered"].includes(props.activeVariant);
+});
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/list/src/ListItemContent.vue b/packages/ui/src/list/src/ListItemContent.vue
similarity index 93%
rename from packages/list/src/ListItemContent.vue
rename to packages/ui/src/list/src/ListItemContent.vue
index 415ffe651..edb82a1b9 100644
--- a/packages/list/src/ListItemContent.vue
+++ b/packages/ui/src/list/src/ListItemContent.vue
@@ -1,15 +1,15 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/packages/list/src/ListItemDivider.vue b/packages/ui/src/list/src/ListItemDivider.vue
similarity index 100%
rename from packages/list/src/ListItemDivider.vue
rename to packages/ui/src/list/src/ListItemDivider.vue
diff --git a/packages/list/src/ListItemHeader.vue b/packages/ui/src/list/src/ListItemHeader.vue
similarity index 100%
rename from packages/list/src/ListItemHeader.vue
rename to packages/ui/src/list/src/ListItemHeader.vue
diff --git a/packages/list/src/ListItemSubTitle.vue b/packages/ui/src/list/src/ListItemSubTitle.vue
similarity index 93%
rename from packages/list/src/ListItemSubTitle.vue
rename to packages/ui/src/list/src/ListItemSubTitle.vue
index 221b9595b..587343546 100644
--- a/packages/list/src/ListItemSubTitle.vue
+++ b/packages/ui/src/list/src/ListItemSubTitle.vue
@@ -1,15 +1,15 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/packages/list/src/ListItemTitle.vue b/packages/ui/src/list/src/ListItemTitle.vue
similarity index 93%
rename from packages/list/src/ListItemTitle.vue
rename to packages/ui/src/list/src/ListItemTitle.vue
index f64abcd6f..13b926307 100644
--- a/packages/list/src/ListItemTitle.vue
+++ b/packages/ui/src/list/src/ListItemTitle.vue
@@ -1,15 +1,15 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/packages/list/src/Readme.stories.mdx b/packages/ui/src/list/src/Readme.stories.mdx
similarity index 100%
rename from packages/list/src/Readme.stories.mdx
rename to packages/ui/src/list/src/Readme.stories.mdx
diff --git a/packages/list/src/api.ts b/packages/ui/src/list/src/api.ts
similarity index 100%
rename from packages/list/src/api.ts
rename to packages/ui/src/list/src/api.ts
diff --git a/packages/ui/src/list/src/index.ts b/packages/ui/src/list/src/index.ts
new file mode 100644
index 000000000..796614ee9
--- /dev/null
+++ b/packages/ui/src/list/src/index.ts
@@ -0,0 +1,19 @@
+import './List.dark.scss';
+export * from './api';
+export { default } from './List.vue';
+export { default as List } from './List.vue';
+export { default as ListItem } from './ListItem.vue';
+export { default as ListCollapse } from './ListCollapse.vue';
+export { default as ListItemDivider } from './ListItemDivider.vue';
+export { default as ListItemHeader } from './ListItemHeader.vue';
+export { default as ListItemTitle } from './ListItemTitle.vue';
+export { default as ListItemSubTitle } from './ListItemSubTitle.vue';
+export { default as ListItemContent } from './ListItemContent.vue';
+export { default as VList } from './List.vue';
+export { default as VListItem } from './ListItem.vue';
+export { default as VListCollapse } from './ListCollapse.vue';
+export { default as VListItemDivider } from './ListItemDivider.vue';
+export { default as VListItemHeader } from './ListItemHeader.vue';
+export { default as VListItemTitle } from './ListItemTitle.vue';
+export { default as VListItemSubTitle } from './ListItemSubTitle.vue';
+export { default as VListItemContent } from './ListItemContent.vue';
diff --git a/packages/modal/src/vue.d.ts b/packages/ui/src/list/src/vue.d.ts
similarity index 100%
rename from packages/modal/src/vue.d.ts
rename to packages/ui/src/list/src/vue.d.ts
diff --git a/packages/menus/tailwind.config.js b/packages/ui/src/list/tailwind.config.js
similarity index 100%
rename from packages/menus/tailwind.config.js
rename to packages/ui/src/list/tailwind.config.js
diff --git a/packages/menus/tsconfig.json b/packages/ui/src/list/tsconfig.json
similarity index 100%
rename from packages/menus/tsconfig.json
rename to packages/ui/src/list/tsconfig.json
diff --git a/packages/list/vite.config.js b/packages/ui/src/list/vite.config.js
similarity index 100%
rename from packages/list/vite.config.js
rename to packages/ui/src/list/vite.config.js
diff --git a/packages/logo/CHANGELOG.md b/packages/ui/src/logo/CHANGELOG.md
similarity index 100%
rename from packages/logo/CHANGELOG.md
rename to packages/ui/src/logo/CHANGELOG.md
diff --git a/packages/logo/README.md b/packages/ui/src/logo/README.md
similarity index 100%
rename from packages/logo/README.md
rename to packages/ui/src/logo/README.md
diff --git a/packages/logo/package.json b/packages/ui/src/logo/package.json
similarity index 100%
rename from packages/logo/package.json
rename to packages/ui/src/logo/package.json
diff --git a/packages/modal/postcss.config.js b/packages/ui/src/logo/postcss.config.js
similarity index 100%
rename from packages/modal/postcss.config.js
rename to packages/ui/src/logo/postcss.config.js
diff --git a/packages/logo/src/Changelog.stories.mdx b/packages/ui/src/logo/src/Changelog.stories.mdx
similarity index 100%
rename from packages/logo/src/Changelog.stories.mdx
rename to packages/ui/src/logo/src/Changelog.stories.mdx
diff --git a/packages/logo/src/Readme.stories.mdx b/packages/ui/src/logo/src/Readme.stories.mdx
similarity index 100%
rename from packages/logo/src/Readme.stories.mdx
rename to packages/ui/src/logo/src/Readme.stories.mdx
diff --git a/packages/logo/src/VLogo.scss b/packages/ui/src/logo/src/VLogo.scss
similarity index 100%
rename from packages/logo/src/VLogo.scss
rename to packages/ui/src/logo/src/VLogo.scss
diff --git a/packages/logo/src/VLogo.spec.ts b/packages/ui/src/logo/src/VLogo.spec.ts
similarity index 100%
rename from packages/logo/src/VLogo.spec.ts
rename to packages/ui/src/logo/src/VLogo.spec.ts
diff --git a/packages/logo/src/VLogo.stories.ts b/packages/ui/src/logo/src/VLogo.stories.ts
similarity index 100%
rename from packages/logo/src/VLogo.stories.ts
rename to packages/ui/src/logo/src/VLogo.stories.ts
diff --git a/packages/logo/src/VLogo.vue b/packages/ui/src/logo/src/VLogo.vue
similarity index 95%
rename from packages/logo/src/VLogo.vue
rename to packages/ui/src/logo/src/VLogo.vue
index 70d5e800f..cdb4d74c1 100644
--- a/packages/logo/src/VLogo.vue
+++ b/packages/ui/src/logo/src/VLogo.vue
@@ -1,57 +1,57 @@
-
-
-
-
- 
- 
-
-
+
+
+
+
+
+
+
+
diff --git a/packages/logo/src/assets/logo-base.png b/packages/ui/src/logo/src/assets/logo-base.png
similarity index 100%
rename from packages/logo/src/assets/logo-base.png
rename to packages/ui/src/logo/src/assets/logo-base.png
diff --git a/packages/logo/src/assets/logo-white.png b/packages/ui/src/logo/src/assets/logo-white.png
similarity index 100%
rename from packages/logo/src/assets/logo-white.png
rename to packages/ui/src/logo/src/assets/logo-white.png
diff --git a/packages/logo/src/index.ts b/packages/ui/src/logo/src/index.ts
similarity index 100%
rename from packages/logo/src/index.ts
rename to packages/ui/src/logo/src/index.ts
diff --git a/packages/logo/src/types.ts b/packages/ui/src/logo/src/types.ts
similarity index 100%
rename from packages/logo/src/types.ts
rename to packages/ui/src/logo/src/types.ts
diff --git a/packages/multi-select/src/vue.d.ts b/packages/ui/src/logo/src/vue.d.ts
similarity index 100%
rename from packages/multi-select/src/vue.d.ts
rename to packages/ui/src/logo/src/vue.d.ts
diff --git a/packages/modal/tailwind.config.js b/packages/ui/src/logo/tailwind.config.js
similarity index 100%
rename from packages/modal/tailwind.config.js
rename to packages/ui/src/logo/tailwind.config.js
diff --git a/packages/multi-select/tsconfig.json b/packages/ui/src/logo/tsconfig.json
similarity index 100%
rename from packages/multi-select/tsconfig.json
rename to packages/ui/src/logo/tsconfig.json
diff --git a/packages/logo/vite.config.js b/packages/ui/src/logo/vite.config.js
similarity index 100%
rename from packages/logo/vite.config.js
rename to packages/ui/src/logo/vite.config.js
diff --git a/packages/menu/CHANGELOG.md b/packages/ui/src/menu/CHANGELOG.md
similarity index 100%
rename from packages/menu/CHANGELOG.md
rename to packages/ui/src/menu/CHANGELOG.md
diff --git a/packages/menu/README.md b/packages/ui/src/menu/README.md
similarity index 88%
rename from packages/menu/README.md
rename to packages/ui/src/menu/README.md
index 25582f069..ede7564c8 100644
--- a/packages/menu/README.md
+++ b/packages/ui/src/menu/README.md
@@ -26,8 +26,6 @@ pnpm i @morpheme/menu
```vue
diff --git a/packages/menu/package.json b/packages/ui/src/menu/package.json
similarity index 100%
rename from packages/menu/package.json
rename to packages/ui/src/menu/package.json
diff --git a/packages/multi-select/postcss.config.js b/packages/ui/src/menu/postcss.config.js
similarity index 100%
rename from packages/multi-select/postcss.config.js
rename to packages/ui/src/menu/postcss.config.js
diff --git a/packages/menu/src/Changelog.stories.mdx b/packages/ui/src/menu/src/Changelog.stories.mdx
similarity index 100%
rename from packages/menu/src/Changelog.stories.mdx
rename to packages/ui/src/menu/src/Changelog.stories.mdx
diff --git a/packages/menu/src/Readme.stories.mdx b/packages/ui/src/menu/src/Readme.stories.mdx
similarity index 100%
rename from packages/menu/src/Readme.stories.mdx
rename to packages/ui/src/menu/src/Readme.stories.mdx
diff --git a/packages/menu/src/VMenu.spec.ts b/packages/ui/src/menu/src/VMenu.spec.ts
similarity index 100%
rename from packages/menu/src/VMenu.spec.ts
rename to packages/ui/src/menu/src/VMenu.spec.ts
diff --git a/packages/menu/src/VMenu.stories.ts b/packages/ui/src/menu/src/VMenu.stories.ts
similarity index 100%
rename from packages/menu/src/VMenu.stories.ts
rename to packages/ui/src/menu/src/VMenu.stories.ts
diff --git a/packages/menu/src/VMenu.vue b/packages/ui/src/menu/src/VMenu.vue
similarity index 98%
rename from packages/menu/src/VMenu.vue
rename to packages/ui/src/menu/src/VMenu.vue
index 4f74a1703..c5193e772 100644
--- a/packages/menu/src/VMenu.vue
+++ b/packages/ui/src/menu/src/VMenu.vue
@@ -8,7 +8,7 @@ export default {
import {computed, type PropType, toRefs} from 'vue';
import VMenuTooltip from './VMenuTooltip.vue';
import VMenuItem from './VMenuItem.vue';
-import VCollapsible from '@morpheme/collapsible';
+import VCollapsible from '../../collapsible/src';
import {useRoute} from 'vue-router';
import VMenuIcon from './VMenuIcon.vue';
import type {Menu} from './types';
diff --git a/packages/menu/src/VMenuIcon.vue b/packages/ui/src/menu/src/VMenuIcon.vue
similarity index 100%
rename from packages/menu/src/VMenuIcon.vue
rename to packages/ui/src/menu/src/VMenuIcon.vue
diff --git a/packages/menu/src/VMenuItem.spec.ts b/packages/ui/src/menu/src/VMenuItem.spec.ts
similarity index 100%
rename from packages/menu/src/VMenuItem.spec.ts
rename to packages/ui/src/menu/src/VMenuItem.spec.ts
diff --git a/packages/menu/src/VMenuItem.vue b/packages/ui/src/menu/src/VMenuItem.vue
similarity index 100%
rename from packages/menu/src/VMenuItem.vue
rename to packages/ui/src/menu/src/VMenuItem.vue
diff --git a/packages/menu/src/VMenuTooltip.spec.ts b/packages/ui/src/menu/src/VMenuTooltip.spec.ts
similarity index 100%
rename from packages/menu/src/VMenuTooltip.spec.ts
rename to packages/ui/src/menu/src/VMenuTooltip.spec.ts
diff --git a/packages/menu/src/VMenuTooltip.vue b/packages/ui/src/menu/src/VMenuTooltip.vue
similarity index 100%
rename from packages/menu/src/VMenuTooltip.vue
rename to packages/ui/src/menu/src/VMenuTooltip.vue
diff --git a/packages/menu/src/index.ts b/packages/ui/src/menu/src/index.ts
similarity index 100%
rename from packages/menu/src/index.ts
rename to packages/ui/src/menu/src/index.ts
diff --git a/packages/menu/src/types.ts b/packages/ui/src/menu/src/types.ts
similarity index 100%
rename from packages/menu/src/types.ts
rename to packages/ui/src/menu/src/types.ts
diff --git a/packages/nav-drawer/src/vue.d.ts b/packages/ui/src/menu/src/vue.d.ts
similarity index 100%
rename from packages/nav-drawer/src/vue.d.ts
rename to packages/ui/src/menu/src/vue.d.ts
diff --git a/packages/multi-select/tailwind.config.js b/packages/ui/src/menu/tailwind.config.js
similarity index 100%
rename from packages/multi-select/tailwind.config.js
rename to packages/ui/src/menu/tailwind.config.js
diff --git a/packages/navbar/tsconfig.json b/packages/ui/src/menu/tsconfig.json
similarity index 100%
rename from packages/navbar/tsconfig.json
rename to packages/ui/src/menu/tsconfig.json
diff --git a/packages/menu/vite.config.js b/packages/ui/src/menu/vite.config.js
similarity index 100%
rename from packages/menu/vite.config.js
rename to packages/ui/src/menu/vite.config.js
diff --git a/packages/menus/CHANGELOG.md b/packages/ui/src/menus/CHANGELOG.md
similarity index 100%
rename from packages/menus/CHANGELOG.md
rename to packages/ui/src/menus/CHANGELOG.md
diff --git a/packages/menus/README.md b/packages/ui/src/menus/README.md
similarity index 100%
rename from packages/menus/README.md
rename to packages/ui/src/menus/README.md
diff --git a/packages/menus/package.json b/packages/ui/src/menus/package.json
similarity index 100%
rename from packages/menus/package.json
rename to packages/ui/src/menus/package.json
diff --git a/packages/nav-drawer/postcss.config.js b/packages/ui/src/menus/postcss.config.js
similarity index 100%
rename from packages/nav-drawer/postcss.config.js
rename to packages/ui/src/menus/postcss.config.js
diff --git a/packages/menus/src/Changelog.stories.mdx b/packages/ui/src/menus/src/Changelog.stories.mdx
similarity index 100%
rename from packages/menus/src/Changelog.stories.mdx
rename to packages/ui/src/menus/src/Changelog.stories.mdx
diff --git a/packages/menus/src/Readme.stories.mdx b/packages/ui/src/menus/src/Readme.stories.mdx
similarity index 100%
rename from packages/menus/src/Readme.stories.mdx
rename to packages/ui/src/menus/src/Readme.stories.mdx
diff --git a/packages/menus/src/VMenus.dark.scss b/packages/ui/src/menus/src/VMenus.dark.scss
similarity index 100%
rename from packages/menus/src/VMenus.dark.scss
rename to packages/ui/src/menus/src/VMenus.dark.scss
diff --git a/packages/menus/src/VMenus.scss b/packages/ui/src/menus/src/VMenus.scss
similarity index 100%
rename from packages/menus/src/VMenus.scss
rename to packages/ui/src/menus/src/VMenus.scss
diff --git a/packages/menus/src/VMenus.spec.ts b/packages/ui/src/menus/src/VMenus.spec.ts
similarity index 95%
rename from packages/menus/src/VMenus.spec.ts
rename to packages/ui/src/menus/src/VMenus.spec.ts
index 421dedeb1..282748102 100644
--- a/packages/menus/src/VMenus.spec.ts
+++ b/packages/ui/src/menus/src/VMenus.spec.ts
@@ -1,84 +1,84 @@
-import { mount } from "@vue/test-utils";
-import VMenus from "./VMenus.vue";
-import VMenusItem from "./VMenusItem.vue";
-
-describe("VMenus", () => {
- it("renders the menu button with the given label", () => {
- const label = "Menu Label";
- const wrapper = mount(VMenus, {
- props: {
- label: label,
- },
- });
-
- expect(wrapper.text()).toContain(label);
- });
-
- it("shows the menu items when the button is clicked", async () => {
- const items = [
- { text: "Item 1" },
- { text: "Item 2" },
- { text: "Item 3" },
- ];
- const wrapper = mount(VMenus, {
- props: {
- items: items,
- },
- });
-
- const button = wrapper.find("button");
- await button.trigger("click");
-
- // for (const item of items) {
- // expect(wrapper.html()).toContain(item.text);
- // }
- });
-
- it("hides the menu items when the button is clicked again", async () => {
- const items = [
- { text: "Item 1" },
- { text: "Item 2" },
- { text: "Item 3" },
- ];
- const wrapper = mount(VMenus, {
- props: {
- items: items,
- },
- });
-
- const button = wrapper.find("button");
- await button.trigger("click");
- await button.trigger("click");
-
- // for (const item of items) {
- // expect(wrapper.html()).not.toContain(item.text);
- // }
- });
-
- // Add more test cases as needed
-});
-
-describe("VMenusItem", () => {
- it("renders the menu button with the given label", () => {
- const wrapper = mount(VMenusItem, {
- slots: {
- default: 'Menu Item'
- }
- });
-
- expect(wrapper.text()).toContain('Menu Item');
- });
-
- it("renders as divider", () => {
- const wrapper = mount(VMenusItem, {
- props: {
- divider: true
- },
- slots: {
- default: 'Menu Item'
- }
- });
-
- expect(wrapper.html()).toContain('v-list-item-divider');
- });
+import { mount } from "@vue/test-utils";
+import VMenus from "./VMenus.vue";
+import VMenusItem from "./VMenusItem.vue";
+
+describe("VMenus", () => {
+ it("renders the menu button with the given label", () => {
+ const label = "Menu Label";
+ const wrapper = mount(VMenus, {
+ props: {
+ label: label,
+ },
+ });
+
+ expect(wrapper.text()).toContain(label);
+ });
+
+ it("shows the menu items when the button is clicked", async () => {
+ const items = [
+ { text: "Item 1" },
+ { text: "Item 2" },
+ { text: "Item 3" },
+ ];
+ const wrapper = mount(VMenus, {
+ props: {
+ items: items,
+ },
+ });
+
+ const button = wrapper.find("button");
+ await button.trigger("click");
+
+ // for (const item of items) {
+ // expect(wrapper.html()).toContain(item.text);
+ // }
+ });
+
+ it("hides the menu items when the button is clicked again", async () => {
+ const items = [
+ { text: "Item 1" },
+ { text: "Item 2" },
+ { text: "Item 3" },
+ ];
+ const wrapper = mount(VMenus, {
+ props: {
+ items: items,
+ },
+ });
+
+ const button = wrapper.find("button");
+ await button.trigger("click");
+ await button.trigger("click");
+
+ // for (const item of items) {
+ // expect(wrapper.html()).not.toContain(item.text);
+ // }
+ });
+
+ // Add more test cases as needed
+});
+
+describe("VMenusItem", () => {
+ it("renders the menu button with the given label", () => {
+ const wrapper = mount(VMenusItem, {
+ slots: {
+ default: 'Menu Item'
+ }
+ });
+
+ expect(wrapper.text()).toContain('Menu Item');
+ });
+
+ it("renders as divider", () => {
+ const wrapper = mount(VMenusItem, {
+ props: {
+ divider: true
+ },
+ slots: {
+ default: 'Menu Item'
+ }
+ });
+
+ expect(wrapper.html()).toContain('v-list-item-divider');
+ });
});
\ No newline at end of file
diff --git a/packages/menus/src/VMenus.stories.ts b/packages/ui/src/menus/src/VMenus.stories.ts
similarity index 88%
rename from packages/menus/src/VMenus.stories.ts
rename to packages/ui/src/menus/src/VMenus.stories.ts
index 6dfb6cbaf..0639b612d 100644
--- a/packages/menus/src/VMenus.stories.ts
+++ b/packages/ui/src/menus/src/VMenus.stories.ts
@@ -1,332 +1,332 @@
-import type {Meta, StoryFn} from '@storybook/vue3';
-import VMenus from './VMenus.vue';
-import VMenusItem from './VMenusItem.vue';
-import VAppBar from '@morpheme/app-bar';
-import VMenusCustom from './stories/VMenusCustom.vue';
-import {ref} from 'vue';
-
-const items = [
- {
- text: 'Home',
- to: '/',
- },
- {
- text: 'About',
- to: '/faq',
- },
- {
- text: 'FAQ',
- to: '/faq',
- },
-];
-
-export default {
- title: 'Components/Menus',
- component: VMenus,
- argTypes: {},
- args: {
- items,
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {
- VMenus,
- },
- setup() {
- return {args};
- },
- template: `
-
-
-
- Profile
- Preferences
- Logout
-
-
-
- `,
-});
-
-export const CustomStyle: StoryFn = (args) => ({
- components: {
- VMenusCustom,
- },
- setup() {
- return {args};
- },
- template: `
-
-
- Item 1
- Item 2
- Item 3
-
-
- Item 4
-
-
- Item 1
- Item 2
- Item 3
-
-
- Item 4
-
-
- Item 1
- Item 2
- Item 3
-
-
-
-
-
-
- `,
-});
-
-export const DarkMode: StoryFn = (args) => ({
- components: {VMenus},
- setup() {
- return {args};
- },
- template: `
-
+
+
+ Profile
+ Preferences
+ Logout
+
+
+
+ `,
+});
+
+export const CustomStyle: StoryFn = (args) => ({
+ components: {
+ VMenusCustom,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ Item 4
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ Item 4
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+
+
+
+ `,
+});
+
+export const DarkMode: StoryFn = (args) => ({
+ components: { VMenus },
+ setup() {
+ return { args };
+ },
+ template: `
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/menus/src/VMenusItem.vue b/packages/ui/src/menus/src/VMenusItem.vue
similarity index 95%
rename from packages/menus/src/VMenusItem.vue
rename to packages/ui/src/menus/src/VMenusItem.vue
index 94f18c325..cb377cc83 100644
--- a/packages/menus/src/VMenusItem.vue
+++ b/packages/ui/src/menus/src/VMenusItem.vue
@@ -1,6 +1,6 @@
diff --git a/packages/navbar/src/vue.d.ts b/packages/ui/src/menus/src/vue.d.ts
similarity index 100%
rename from packages/navbar/src/vue.d.ts
rename to packages/ui/src/menus/src/vue.d.ts
diff --git a/packages/nav-drawer/tailwind.config.js b/packages/ui/src/menus/tailwind.config.js
similarity index 100%
rename from packages/nav-drawer/tailwind.config.js
rename to packages/ui/src/menus/tailwind.config.js
diff --git a/packages/pagination/tsconfig.json b/packages/ui/src/menus/tsconfig.json
similarity index 100%
rename from packages/pagination/tsconfig.json
rename to packages/ui/src/menus/tsconfig.json
diff --git a/packages/menus/vite.config.js b/packages/ui/src/menus/vite.config.js
similarity index 100%
rename from packages/menus/vite.config.js
rename to packages/ui/src/menus/vite.config.js
diff --git a/packages/modal/CHANGELOG.md b/packages/ui/src/modal/CHANGELOG.md
similarity index 100%
rename from packages/modal/CHANGELOG.md
rename to packages/ui/src/modal/CHANGELOG.md
diff --git a/packages/modal/README.md b/packages/ui/src/modal/README.md
similarity index 100%
rename from packages/modal/README.md
rename to packages/ui/src/modal/README.md
diff --git a/packages/modal/package.json b/packages/ui/src/modal/package.json
similarity index 100%
rename from packages/modal/package.json
rename to packages/ui/src/modal/package.json
diff --git a/packages/navbar/postcss.config.js b/packages/ui/src/modal/postcss.config.js
similarity index 100%
rename from packages/navbar/postcss.config.js
rename to packages/ui/src/modal/postcss.config.js
diff --git a/packages/modal/src/Changelog.stories.mdx b/packages/ui/src/modal/src/Changelog.stories.mdx
similarity index 100%
rename from packages/modal/src/Changelog.stories.mdx
rename to packages/ui/src/modal/src/Changelog.stories.mdx
diff --git a/packages/modal/src/Modal.vue b/packages/ui/src/modal/src/Modal.vue
similarity index 100%
rename from packages/modal/src/Modal.vue
rename to packages/ui/src/modal/src/Modal.vue
diff --git a/packages/modal/src/ModalBody.vue b/packages/ui/src/modal/src/ModalBody.vue
similarity index 100%
rename from packages/modal/src/ModalBody.vue
rename to packages/ui/src/modal/src/ModalBody.vue
diff --git a/packages/modal/src/ModalFooter.vue b/packages/ui/src/modal/src/ModalFooter.vue
similarity index 100%
rename from packages/modal/src/ModalFooter.vue
rename to packages/ui/src/modal/src/ModalFooter.vue
diff --git a/packages/modal/src/ModalHeader.vue b/packages/ui/src/modal/src/ModalHeader.vue
similarity index 100%
rename from packages/modal/src/ModalHeader.vue
rename to packages/ui/src/modal/src/ModalHeader.vue
diff --git a/packages/modal/src/ModalTitle.vue b/packages/ui/src/modal/src/ModalTitle.vue
similarity index 100%
rename from packages/modal/src/ModalTitle.vue
rename to packages/ui/src/modal/src/ModalTitle.vue
diff --git a/packages/modal/src/Readme.stories.mdx b/packages/ui/src/modal/src/Readme.stories.mdx
similarity index 100%
rename from packages/modal/src/Readme.stories.mdx
rename to packages/ui/src/modal/src/Readme.stories.mdx
diff --git a/packages/modal/src/VModal.dark.scss b/packages/ui/src/modal/src/VModal.dark.scss
similarity index 100%
rename from packages/modal/src/VModal.dark.scss
rename to packages/ui/src/modal/src/VModal.dark.scss
diff --git a/packages/modal/src/VModal.scss b/packages/ui/src/modal/src/VModal.scss
similarity index 100%
rename from packages/modal/src/VModal.scss
rename to packages/ui/src/modal/src/VModal.scss
diff --git a/packages/modal/src/VModal.spec.ts b/packages/ui/src/modal/src/VModal.spec.ts
similarity index 100%
rename from packages/modal/src/VModal.spec.ts
rename to packages/ui/src/modal/src/VModal.spec.ts
diff --git a/packages/modal/src/VModal.stories.ts b/packages/ui/src/modal/src/VModal.stories.ts
similarity index 89%
rename from packages/modal/src/VModal.stories.ts
rename to packages/ui/src/modal/src/VModal.stories.ts
index 9895f63b9..629d6bd09 100644
--- a/packages/modal/src/VModal.stories.ts
+++ b/packages/ui/src/modal/src/VModal.stories.ts
@@ -1,437 +1,437 @@
-import {VCard} from '@morpheme/card';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import VModal from './VModal.vue';
-import {onUnmounted, ref} from 'vue';
-import {VBtn} from '@morpheme/button';
-import type {VModalEvent} from './types';
-import Modal from './Modal.vue';
-import ModalHeader from './ModalHeader.vue';
-import ModalTitle from './ModalTitle.vue';
-import ModalBody from './ModalBody.vue';
-import ModalFooter from './ModalFooter.vue';
-
-export default {
- title: 'Components/Modal',
- component: VModal,
- argTypes: {},
- args: {
- modelValue: true,
- title: 'Modal Header',
- onConfirm: (e: VModalEvent) => {
- alert('Confirmed!');
- e.close();
- },
- },
- subcomponents: {
- Modal,
- ModalHeader,
- ModalTitle,
- ModalBody,
- ModalFooter,
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {
- VModal,
- VBtn,
- },
- setup() {
- const isOpen = ref(false);
- return {args, isOpen};
- },
- template: `
-
-
- Click Me
-
- Hello World
-
- `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = {
- docs: {
- source: {
- code: `
-
-
- Click Me
-
- Hello World
-
- `,
- },
- },
-};
-
-export const Confirm = Template.bind({});
-Confirm.args = {
- confirm: true,
-};
-Confirm.parameters = {
- docs: {
- source: {
- code: `
-
-
- Click Me
-
- Hello World
-
- `,
- },
- },
-};
-
-export const HideHeader = Template.bind({});
-HideHeader.args = {
- hideHeader: true,
-};
-HideHeader.parameters = {
- docs: {
- source: {
- code: `
-
-
- Click Me
-
- Hello World
-
- `,
- },
- },
-};
-
-export const HideFooter = Template.bind({});
-HideFooter.args = {
- hideFooter: true,
-};
-HideFooter.parameters = {
- docs: {
- source: {
- code: `
-
-
- Click Me
-
- Hello World
-
- `,
- },
- },
-};
-
-export const HideXButton = Template.bind({});
-HideXButton.args = {
- hideXButton: true,
-};
-HideXButton.parameters = {
- docs: {
- source: {
- code: `
-
-
- Click Me
-
- Hello World
-
- `,
- },
- },
-};
-
-export const Fullscreen: StoryFn = (args) => ({
- components: {
- VModal,
- VBtn,
- },
- setup() {
- const isOpen = ref(false);
- return {args, isOpen};
- },
- template: `
-
-
- Click Me
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
- ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
- in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident,
- sunt in culpa qui officia deserunt mollit anim id est laborum.
-
- `,
-});
-
-export const Centered: StoryFn = (args) => ({
- components: {
- VModal,
- VBtn,
- },
- setup() {
- const isOpen = ref(false);
- const loading = ref(false);
- const onConfirm = async (e) => {
- loading.value = true;
- await deleteItem();
- loading.value = false;
- e.close();
- };
- const deleteItem = () => {
- return new Promise((resolve: (value?: any) => void) => {
- setTimeout(() => {
- resolve();
- }, 2000);
- });
- };
- return {args, isOpen, onConfirm, loading};
- },
- template: `
-
-
- Delete
-
-
- `,
-});
-
-export const Loading: StoryFn = (args) => ({
- components: {
- VModal,
- VBtn,
- },
- setup() {
- const isOpen = ref(true);
- const loading = ref(true);
- return {args, isOpen, loading};
- },
- template: `
-
-
- Click Me
-
- Hello World
-
- `,
-});
-
-export const Persistent: StoryFn = (args) => ({
- components: {
- VModal,
- VBtn,
- },
- setup() {
- const isOpen = ref(true);
- return {args, isOpen};
- },
- template: `
-
-
- Click Me
-
- Hello World
-
- `,
-});
-
-export const CustomClass: StoryFn = (args) => ({
- components: {
- VModal,
- VBtn,
- },
- setup() {
- const isOpen = ref(true);
- return {args, isOpen};
- },
- template: `
-
-
- Click Me
-
- Hello World
-
- `,
-});
-
-export const CustomWidth: StoryFn = (args) => ({
- components: {
- VModal,
- VBtn,
- },
- setup() {
- const isOpen = ref(true);
- return {args, isOpen};
- },
- template: `
-
-
- Click Me
-
- Hello World
-
- `,
-});
-
-export const Customization: StoryFn = (args) => ({
- components: {
- VModal,
- VBtn,
- },
- setup() {
- const isOpen = ref(true);
- return {args, isOpen};
- },
- template: `
-
- Hello Tailwind!
-
- `,
-});
-
-export const DarkMode: StoryFn = (args) => ({
- components: {VModal, VCard},
- setup() {
- document.documentElement.classList.add(
- 'dark',
- 'dark:bg-gray-true-900',
- 'dark:text-gray-true-200',
- );
- onUnmounted(() => {
- document.documentElement.classList.remove(
- 'dark',
- 'dark:bg-gray-true-900',
- 'dark:text-gray-true-200',
- );
- });
- return {args};
- },
- template: `
- = (args) => ({
- components: {
- Modal,
- VBtn,
- ModalHeader,
- ModalTitle,
- ModalFooter,
- ModalBody,
- },
- setup() {
- const isOpen = ref(false);
- return {args, isOpen};
- },
- template: `
- Open Modal
-
-
-
- Modal Title
-
-
-
-
- Close
- Okay
-
-
- `,
-});
+import { VCard } from '../../card/src';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import VModal from './VModal.vue';
+import { onUnmounted, ref } from 'vue';
+import { VBtn } from '../../button/src';
+import type { VModalEvent } from './types';
+import Modal from './Modal.vue';
+import ModalHeader from './ModalHeader.vue';
+import ModalTitle from './ModalTitle.vue';
+import ModalBody from './ModalBody.vue';
+import ModalFooter from './ModalFooter.vue';
+
+export default {
+ title: 'Components/Modal',
+ component: VModal,
+ argTypes: {},
+ args: {
+ modelValue: true,
+ title: 'Modal Header',
+ onConfirm: (e: VModalEvent) => {
+ alert('Confirmed!');
+ e.close();
+ },
+ },
+ subcomponents: {
+ Modal,
+ ModalHeader,
+ ModalTitle,
+ ModalBody,
+ ModalFooter,
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: {
+ VModal,
+ VBtn,
+ },
+ setup() {
+ const isOpen = ref(false);
+ return { args, isOpen };
+ },
+ template: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+ },
+ },
+};
+
+export const Confirm = Template.bind({});
+Confirm.args = {
+ confirm: true,
+};
+Confirm.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+ },
+ },
+};
+
+export const HideHeader = Template.bind({});
+HideHeader.args = {
+ hideHeader: true,
+};
+HideHeader.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+ },
+ },
+};
+
+export const HideFooter = Template.bind({});
+HideFooter.args = {
+ hideFooter: true,
+};
+HideFooter.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+ },
+ },
+};
+
+export const HideXButton = Template.bind({});
+HideXButton.args = {
+ hideXButton: true,
+};
+HideXButton.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+ },
+ },
+};
+
+export const Fullscreen: StoryFn = (args) => ({
+ components: {
+ VModal,
+ VBtn,
+ },
+ setup() {
+ const isOpen = ref(false);
+ return { args, isOpen };
+ },
+ template: `
+
+
+ Click Me
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+ ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+ in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident,
+ sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ `,
+});
+
+export const Centered: StoryFn = (args) => ({
+ components: {
+ VModal,
+ VBtn,
+ },
+ setup() {
+ const isOpen = ref(false);
+ const loading = ref(false);
+ const onConfirm = async (e) => {
+ loading.value = true;
+ await deleteItem();
+ loading.value = false;
+ e.close();
+ };
+ const deleteItem = () => {
+ return new Promise((resolve: (value?: any) => void) => {
+ setTimeout(() => {
+ resolve();
+ }, 2000);
+ });
+ };
+ return { args, isOpen, onConfirm, loading };
+ },
+ template: `
+
+
+ Delete
+
+
+ `,
+});
+
+export const Loading: StoryFn = (args) => ({
+ components: {
+ VModal,
+ VBtn,
+ },
+ setup() {
+ const isOpen = ref(true);
+ const loading = ref(true);
+ return { args, isOpen, loading };
+ },
+ template: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+});
+
+export const Persistent: StoryFn = (args) => ({
+ components: {
+ VModal,
+ VBtn,
+ },
+ setup() {
+ const isOpen = ref(true);
+ return { args, isOpen };
+ },
+ template: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+});
+
+export const CustomClass: StoryFn = (args) => ({
+ components: {
+ VModal,
+ VBtn,
+ },
+ setup() {
+ const isOpen = ref(true);
+ return { args, isOpen };
+ },
+ template: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+});
+
+export const CustomWidth: StoryFn = (args) => ({
+ components: {
+ VModal,
+ VBtn,
+ },
+ setup() {
+ const isOpen = ref(true);
+ return { args, isOpen };
+ },
+ template: `
+
+
+ Click Me
+
+ Hello World
+
+ `,
+});
+
+export const Customization: StoryFn = (args) => ({
+ components: {
+ VModal,
+ VBtn,
+ },
+ setup() {
+ const isOpen = ref(true);
+ return { args, isOpen };
+ },
+ template: `
+
+ Hello Tailwind!
+
+ `,
+});
+
+export const DarkMode: StoryFn = (args) => ({
+ components: { VModal, VCard },
+ setup() {
+ document.documentElement.classList.add(
+ 'dark',
+ 'dark:bg-gray-true-900',
+ 'dark:text-gray-true-200',
+ );
+ onUnmounted(() => {
+ document.documentElement.classList.remove(
+ 'dark',
+ 'dark:bg-gray-true-900',
+ 'dark:text-gray-true-200',
+ );
+ });
+ return { args };
+ },
+ template: `
+ = (args) => ({
+ components: {
+ Modal,
+ VBtn,
+ ModalHeader,
+ ModalTitle,
+ ModalFooter,
+ ModalBody,
+ },
+ setup() {
+ const isOpen = ref(false);
+ return { args, isOpen };
+ },
+ template: `
+ Open Modal
+
+
+
+ Modal Title
+
+
+
+
+ Close
+ Okay
+
+
+ `,
+});
diff --git a/packages/modal/src/VModal.vue b/packages/ui/src/modal/src/VModal.vue
similarity index 94%
rename from packages/modal/src/VModal.vue
rename to packages/ui/src/modal/src/VModal.vue
index c43fac4fc..465f50f01 100644
--- a/packages/modal/src/VModal.vue
+++ b/packages/ui/src/modal/src/VModal.vue
@@ -1,557 +1,557 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/packages/modal/src/index.ts b/packages/ui/src/modal/src/index.ts
similarity index 100%
rename from packages/modal/src/index.ts
rename to packages/ui/src/modal/src/index.ts
diff --git a/packages/modal/src/types.ts b/packages/ui/src/modal/src/types.ts
similarity index 100%
rename from packages/modal/src/types.ts
rename to packages/ui/src/modal/src/types.ts
diff --git a/packages/pagination/src/vue.d.ts b/packages/ui/src/modal/src/vue.d.ts
similarity index 100%
rename from packages/pagination/src/vue.d.ts
rename to packages/ui/src/modal/src/vue.d.ts
diff --git a/packages/navbar/tailwind.config.js b/packages/ui/src/modal/tailwind.config.js
similarity index 100%
rename from packages/navbar/tailwind.config.js
rename to packages/ui/src/modal/tailwind.config.js
diff --git a/packages/modal/tsconfig.json b/packages/ui/src/modal/tsconfig.json
similarity index 100%
rename from packages/modal/tsconfig.json
rename to packages/ui/src/modal/tsconfig.json
diff --git a/packages/modal/vite.config.js b/packages/ui/src/modal/vite.config.js
similarity index 100%
rename from packages/modal/vite.config.js
rename to packages/ui/src/modal/vite.config.js
diff --git a/packages/multi-select/CHANGELOG.md b/packages/ui/src/multi-select/CHANGELOG.md
similarity index 100%
rename from packages/multi-select/CHANGELOG.md
rename to packages/ui/src/multi-select/CHANGELOG.md
diff --git a/packages/multi-select/README.md b/packages/ui/src/multi-select/README.md
similarity index 100%
rename from packages/multi-select/README.md
rename to packages/ui/src/multi-select/README.md
diff --git a/packages/multi-select/package.json b/packages/ui/src/multi-select/package.json
similarity index 100%
rename from packages/multi-select/package.json
rename to packages/ui/src/multi-select/package.json
diff --git a/packages/pagination/postcss.config.js b/packages/ui/src/multi-select/postcss.config.js
similarity index 100%
rename from packages/pagination/postcss.config.js
rename to packages/ui/src/multi-select/postcss.config.js
diff --git a/packages/multi-select/src/Changelog.stories.mdx b/packages/ui/src/multi-select/src/Changelog.stories.mdx
similarity index 100%
rename from packages/multi-select/src/Changelog.stories.mdx
rename to packages/ui/src/multi-select/src/Changelog.stories.mdx
diff --git a/packages/multi-select/src/Readme.stories.mdx b/packages/ui/src/multi-select/src/Readme.stories.mdx
similarity index 100%
rename from packages/multi-select/src/Readme.stories.mdx
rename to packages/ui/src/multi-select/src/Readme.stories.mdx
diff --git a/packages/multi-select/src/VMultiSelect.dark.scss b/packages/ui/src/multi-select/src/VMultiSelect.dark.scss
similarity index 100%
rename from packages/multi-select/src/VMultiSelect.dark.scss
rename to packages/ui/src/multi-select/src/VMultiSelect.dark.scss
diff --git a/packages/multi-select/src/VMultiSelect.scss b/packages/ui/src/multi-select/src/VMultiSelect.scss
similarity index 100%
rename from packages/multi-select/src/VMultiSelect.scss
rename to packages/ui/src/multi-select/src/VMultiSelect.scss
diff --git a/packages/multi-select/src/VMultiSelect.spec.ts b/packages/ui/src/multi-select/src/VMultiSelect.spec.ts
similarity index 96%
rename from packages/multi-select/src/VMultiSelect.spec.ts
rename to packages/ui/src/multi-select/src/VMultiSelect.spec.ts
index 00760c30b..8890b022f 100644
--- a/packages/multi-select/src/VMultiSelect.spec.ts
+++ b/packages/ui/src/multi-select/src/VMultiSelect.spec.ts
@@ -1,77 +1,77 @@
-import { mount } from '@vue/test-utils';
-import VMultiSelect from './VMultiSelect.vue';
-
-describe('VMultiSelect', () => {
- it('renders correctly', () => {
- const wrapper = mount(VMultiSelect);
- expect(wrapper.exists()).toBe(true);
- });
-
- it('handles click event', () => {
- const wrapper = mount(VMultiSelect);
- const input = wrapper.find('.v-multi-select-input-control');
-
- input.trigger('click');
- expect(wrapper.vm.isOpen).toBe(true);
- });
-
- it('filters items based on search input', async () => {
- const wrapper = mount(VMultiSelect, {
- props: {
- items: [
- { value: 1, text: 'Apple' },
- { value: 2, text: 'Banana' },
- { value: 3, text: 'Orange' },
- ],
- },
- });
-
- wrapper.vm.search = 'orange';
- await wrapper.vm.$nextTick();
- expect(wrapper.vm.filteredItems).toEqual([
- { value: 3, text: 'Orange' },
- ]);
-
- wrapper.vm.search = 'banana';
- await wrapper.vm.$nextTick();
- expect(wrapper.vm.filteredItems).toEqual([{ value: 2, text: 'Banana' }]);
-
- wrapper.vm.search = '';
- await wrapper.vm.$nextTick();
- expect(wrapper.vm.filteredItems).toEqual([
- { value: 1, text: 'Apple' },
- { value: 2, text: 'Banana' },
- { value: 3, text: 'Orange' },
- ]);
- });
-
- it('selects and deselects items', async () => {
- const wrapper = mount(VMultiSelect, {
- props: {
- items: [
- { value: 1, text: 'Apple' },
- { value: 2, text: 'Banana' },
- ],
- },
- });
- const input = wrapper.find('.v-multi-select-input-control');
-
- input.trigger('click');
- await wrapper.vm.$nextTick();
-
- const item1 = wrapper.findAll('.v-multi-select-item').at(0);
- const item2 = wrapper.findAll('.v-multi-select-item').at(1);
-
- item1.trigger('click');
- expect(wrapper.vm.uncontrolledValue).toEqual([{ value: 1, text: 'Apple' }]);
-
- item2.trigger('click');
- expect(wrapper.vm.uncontrolledValue).toEqual([
- { value: 1, text: 'Apple' },
- { value: 2, text: 'Banana' },
- ]);
-
- item1.trigger('click');
- expect(wrapper.vm.uncontrolledValue).toEqual([{ value: 2, text: 'Banana' }]);
- });
-});
+import { mount } from '@vue/test-utils';
+import VMultiSelect from './VMultiSelect.vue';
+
+describe('VMultiSelect', () => {
+ it('renders correctly', () => {
+ const wrapper = mount(VMultiSelect);
+ expect(wrapper.exists()).toBe(true);
+ });
+
+ it('handles click event', () => {
+ const wrapper = mount(VMultiSelect);
+ const input = wrapper.find('.v-multi-select-input-control');
+
+ input.trigger('click');
+ expect(wrapper.vm.isOpen).toBe(true);
+ });
+
+ it('filters items based on search input', async () => {
+ const wrapper = mount(VMultiSelect, {
+ props: {
+ items: [
+ { value: 1, text: 'Apple' },
+ { value: 2, text: 'Banana' },
+ { value: 3, text: 'Orange' },
+ ],
+ },
+ });
+
+ wrapper.vm.search = 'orange';
+ await wrapper.vm.$nextTick();
+ expect(wrapper.vm.filteredItems).toEqual([
+ { value: 3, text: 'Orange' },
+ ]);
+
+ wrapper.vm.search = 'banana';
+ await wrapper.vm.$nextTick();
+ expect(wrapper.vm.filteredItems).toEqual([{ value: 2, text: 'Banana' }]);
+
+ wrapper.vm.search = '';
+ await wrapper.vm.$nextTick();
+ expect(wrapper.vm.filteredItems).toEqual([
+ { value: 1, text: 'Apple' },
+ { value: 2, text: 'Banana' },
+ { value: 3, text: 'Orange' },
+ ]);
+ });
+
+ it('selects and deselects items', async () => {
+ const wrapper = mount(VMultiSelect, {
+ props: {
+ items: [
+ { value: 1, text: 'Apple' },
+ { value: 2, text: 'Banana' },
+ ],
+ },
+ });
+ const input = wrapper.find('.v-multi-select-input-control');
+
+ input.trigger('click');
+ await wrapper.vm.$nextTick();
+
+ const item1 = wrapper.findAll('.v-multi-select-item').at(0);
+ const item2 = wrapper.findAll('.v-multi-select-item').at(1);
+
+ item1.trigger('click');
+ expect(wrapper.vm.uncontrolledValue).toEqual([{ value: 1, text: 'Apple' }]);
+
+ item2.trigger('click');
+ expect(wrapper.vm.uncontrolledValue).toEqual([
+ { value: 1, text: 'Apple' },
+ { value: 2, text: 'Banana' },
+ ]);
+
+ item1.trigger('click');
+ expect(wrapper.vm.uncontrolledValue).toEqual([{ value: 2, text: 'Banana' }]);
+ });
+});
diff --git a/packages/multi-select/src/VMultiSelect.stories.ts b/packages/ui/src/multi-select/src/VMultiSelect.stories.ts
similarity index 86%
rename from packages/multi-select/src/VMultiSelect.stories.ts
rename to packages/ui/src/multi-select/src/VMultiSelect.stories.ts
index 4780d6f1a..5ae873858 100644
--- a/packages/multi-select/src/VMultiSelect.stories.ts
+++ b/packages/ui/src/multi-select/src/VMultiSelect.stories.ts
@@ -1,904 +1,904 @@
-import VMultiSelect from './VMultiSelect.vue';
-import VBtn from '@morpheme/button';
-import {useForm} from 'vee-validate';
-import {object, array} from 'yup';
-import {computed, ref, onMounted} from 'vue';
-import type {VMultiSelectItem} from './types';
-import type {Story} from '@storybook/vue3';
-
-const items = [...Array(200)].map((_, index) => ({
- value: index + 1,
- text: `Option ${index + 1}`,
-}));
-
-const genreItems = [
- 'pop',
- 'rock',
- 'jazz',
- 'alternative',
- 'electronic',
- 'classical',
- 'hiphop',
- 'blues',
-].map((e) => ({text: e.toUpperCase(), value: e}));
-
-const userItems = [
- {
- name: {
- title: 'Miss',
- first: 'Laura',
- last: 'Woods',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/women/88.jpg',
- country: 'Ireland',
- email: 'laura.woods@example.com',
- nat: 'IE',
- },
- {
- name: {
- title: 'Mr',
- first: 'Marten',
- last: 'Faber',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
- country: 'Germany',
- email: 'marten.faber@example.com',
- nat: 'DE',
- },
- {
- name: {
- title: 'Miss',
- first: 'Christy',
- last: 'Diaz',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/women/53.jpg',
- country: 'Australia',
- email: 'christy.diaz@example.com',
- nat: 'AU',
- },
- {
- name: {
- title: 'Mrs',
- first: 'Naomi',
- last: 'Ortiz',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/women/10.jpg',
- country: 'Australia',
- email: 'naomi.ortiz@example.com',
- nat: 'AU',
- },
- {
- name: {
- title: 'Miss',
- first: 'Emeline',
- last: 'Carpentier',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/women/95.jpg',
- country: 'France',
- email: 'emeline.carpentier@example.com',
- nat: 'FR',
- },
- {
- name: {
- title: 'Mr',
- first: 'Jun',
- last: 'Hansen',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
- country: 'Netherlands',
- email: 'jun.hansen@example.com',
- nat: 'NL',
- },
- {
- name: {
- title: 'Miss',
- first: 'Carla',
- last: 'Fernández',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/women/52.jpg',
- country: 'Spain',
- email: 'carla.fernandez@example.com',
- nat: 'ES',
- },
- {
- name: {
- title: 'Ms',
- first: 'Vandana',
- last: 'Dalvi',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/women/16.jpg',
- country: 'India',
- email: 'vandana.dalvi@example.com',
- nat: 'IN',
- },
- {
- name: {
- title: 'Mrs',
- first: 'Nurdan',
- last: 'Köybaşı',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/women/86.jpg',
- country: 'Turkey',
- email: 'nurdan.koybasi@example.com',
- nat: 'TR',
- },
- {
- name: {
- title: 'Mr',
- first: 'Marc',
- last: 'Shaw',
- },
- picture: 'https://randomuser.me/api/portraits/thumb/men/92.jpg',
- country: 'United States',
- email: 'marc.shaw@example.com',
- nat: 'US',
- },
-];
-
-export default {
- title: 'Forms/MultiSelect',
- component: VMultiSelect,
- args: {items},
-};
-
-const Template = (args) => ({
- components: {
- VMultiSelect,
- },
- setup() {
- return {args};
- },
- template: `,
+ default: () => [],
+ },
+ items: {
+ type: Array as PropType,
+ default: () => [],
+ },
+ itemText: {
+ type: String,
+ default: 'text',
+ },
+ itemValue: {
+ type: String,
+ default: 'value',
+ },
+ searchBy: {
+ type: [String, Function] as PropType,
+ default: 'text',
+ },
+ maxBadge: {
+ type: Number,
+ default: 0,
+ },
+ placeholder: {
+ type: String,
+ default: 'Search...',
+ },
+ delay: {
+ type: Number,
+ default: 500,
+ },
+ id: {
+ type: String,
+ default: '',
+ },
+ name: {
+ type: String,
+ default: '',
+ },
+ inputProps: {
+ type: Object as PropType>,
+ default: () => ({}),
+ },
+ selectAll: {
+ type: Boolean,
+ default: false,
+ },
+ loading: {
+ type: Boolean,
+ default: false,
+ },
+ error: {
+ type: Boolean,
+ default: false,
+ },
+ errorMessages: {
+ type: Array,
+ default: () => [],
+ },
+ wrapperClass: {
+ type: String,
+ default: '',
+ },
+ inputClass: {
+ type: String,
+ default: '',
+ },
+ badgeColor: {
+ type: String,
+ default: 'primary',
+ },
+ badgeClass: {
+ type: String,
+ default: '',
+ },
+ badgeProps: {
+ type: Object,
+ default: () => ({}),
+ },
+ dropdownClass: {
+ type: String,
+ default: '',
+ },
+ itemClass: {
+ type: String,
+ default: '',
+ },
+ checkWrapperClass: {
+ type: String,
+ default: '',
+ },
+ checkIconClass: {
+ type: String,
+ default: '',
+ },
+ noDataClass: {
+ type: String,
+ default: '',
+ },
+ loadingClass: {
+ type: String,
+ default: '',
+ },
+ label: {
+ type: String,
+ default: '',
+ },
+ labelClass: {
+ type: String,
+ default: 'mb-2 block',
+ },
+ rules: {
+ type: String,
+ default: '',
+ },
+ errorClass: {
+ type: String,
+ default: 'text-error-600 mt-1 text-sm',
+ },
+ transition: {
+ type: String,
+ default: 'fade',
+ },
+ iconSize: {
+ type: String,
+ default: 'xs',
+ },
+ readonly: {
+ type: Boolean,
+ default: false,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ validationMode: {
+ type: String as PropType,
+ default: 'aggressive',
+ },
+ fieldOptions: {
+ type: Object as PropType>,
+ default: () => ({}),
+ },
+ hideError: {
+ type: Boolean,
+ default: false,
+ },
+ shadow: {
+ type: Boolean,
+ default: false,
+ },
+ hint: {
+ type: String,
+ default: '',
+ },
+});
+
+const emit = defineEmits([
+ 'click:outside',
+ 'update:modelValue',
+ 'search',
+ 'selected',
+ 'clear',
+]);
+
+const {
+ maxBadge,
+ items,
+ placeholder,
+ id,
+ delay,
+ name,
+ inputProps,
+ itemText,
+ itemValue,
+ searchBy,
+ selectAll,
+ loading,
+ disabled,
+ readonly,
+} = toRefs(props);
+
+// refs
+const target = ref(null);
+const isOpen = ref(false);
+const search = ref('');
+const focus = ref(-1);
+const refItems = ref([]);
+const dropdown = ref(null);
+
+const {errorMessage, uncontrolledValue} = useFormValue(
+ props,
+ emit,
+ props.fieldOptions,
+);
+
+const matchBy = (item: VMultiSelectItem, key: string) => {
+ return String(item?.[key])
+ ?.toLowerCase()
+ ?.includes(search.value.toLowerCase());
+};
+
+const searchItem = (item: VMultiSelectItem) => {
+ if (!search.value) return true;
+
+ return [
+ typeof searchBy.value === 'string' ? searchBy.value : '',
+ itemText.value,
+ itemValue.value,
+ ]
+ .filter(Boolean)
+ .some((query) => {
+ if (typeof searchBy.value === 'function') {
+ return searchBy.value(item, search.value);
+ }
+
+ return matchBy(item, query);
+ });
+};
+
+// computed
+const filteredItems = computed(() => items.value.filter(searchItem));
+const badges = computed(() =>
+ maxBadge.value > 0
+ ? uncontrolledValue.value.slice(0, maxBadge.value)
+ : uncontrolledValue.value,
+);
+
+// methods
+const setRefItem = (el: any, index: number) => {
+ if (el) refItems.value[index] = el;
+};
+
+onBeforeUpdate(() => {
+ refItems.value = [];
+});
+
+const handleSelect = (item: VMultiSelectItem) => {
+ const index = findIndex(item);
+ if (index > -1) {
+ uncontrolledValue.value.splice(index, 1);
+ } else {
+ uncontrolledValue.value.push(item);
+ }
+ emit('selected', uncontrolledValue);
+};
+
+const findIndex = (item: VMultiSelectItem) => {
+ return uncontrolledValue.value?.findIndex(
+ (sItem: VMultiSelectItem) =>
+ sItem[itemValue.value] === item?.[itemValue.value],
+ );
+};
+
+const hasItem = (item: VMultiSelectItem) => findIndex(item) > -1;
+
+const isSelected = (item: VMultiSelectItem, index: number) => {
+ return item.selected || hasItem(item);
+};
+
+const clearSelected = () => {
+ uncontrolledValue.value = [];
+ focus.value = -1;
+ emit('clear');
+};
+
+const deselect = (item: VMultiSelectItem) => {
+ const index = findIndex(item);
+ if (index > -1) {
+ uncontrolledValue.value.splice(index, 1);
+ }
+};
+
+const handleSearch = useDebounceFn((event) => {
+ isOpen.value = true;
+ search.value = event.target.value;
+ focus.value = 0;
+
+ emit('search', search);
+}, delay.value);
+
+const isAllSelected = computed(
+ () => uncontrolledValue.value.length === items.value.length,
+);
+
+const toggleSelectAll = () => {
+ if (isAllSelected.value) {
+ clearSelected();
+ } else {
+ items.value.forEach((item) => {
+ const index = findIndex(item);
+ if (index < 0) {
+ uncontrolledValue.value.push(item);
+ }
+ });
+ }
+};
+
+const onInputClick = () => {
+ if (!readonly.value && !disabled.value) {
+ isOpen.value = true;
+ }
+};
+
+onClickOutside(target, () => {
+ emit('click:outside');
+ isOpen.value = false;
+});
+
+const onEnter = () => {
+ const focused = filteredItems.value[focus.value];
+ if (focused) {
+ handleSelect(focused);
+ }
+};
+
+const onDown = () => {
+ if (!isOpen.value) {
+ isOpen.value = true;
+ }
+
+ if (focus.value === null) {
+ focus.value = 0;
+ } else if (focus.value < items.value.length - 1) {
+ focus.value++;
+ }
+
+ focusItem();
+};
+
+const onUp = () => {
+ if (!isOpen.value) {
+ isOpen.value = true;
+ }
+
+ if (focus.value === null) {
+ focus.value = 0;
+ } else if (focus.value === 0) {
+ focus.value = -1;
+ } else {
+ focus.value--;
+ }
+
+ focusItem();
+};
+
+const onTab = (e: KeyboardEvent) => {
+ if (e.shiftKey) {
+ onUp();
+ } else {
+ onDown();
+ }
+};
+
+const onEsc = () => {
+ isOpen.value = false;
+};
+
+const focusItem = () => {
+ nextTick(() => {
+ const index = focus.value;
+ const target = refItems.value[index];
+ const top = target?.offsetTop - (dropdown.value!.offsetHeight - 100);
+
+ dropdown.value?.scrollTo({top, behavior: 'smooth'});
+ });
+};
+
+defineSlots<{
+ selection?: (props: {
+ index: number;
+ item: VMultiSelectItem;
+ value: string;
+ onRemove: () => void;
+ }) => any;
+ 'select-all'?: (props: {onClick: () => void; isSelected: boolean}) => any;
+ 'prepend.item'?: (props: {}) => any;
+ 'append.item'?: (props: {}) => any;
+ 'item.label'?: (props: {
+ index: number;
+ item: VMultiSelectItem;
+ value: string;
+ isSelected: boolean;
+ }) => any;
+ 'max-selection'?: (props: {}) => any;
+ hint?: (props: {}) => any;
+}>();
+
+
+
+
+ ;
-
-const Template: StoryFn = (args) => ({
- components: {NavDrawer},
- setup() {
- return {args, colors};
- },
- template: `
-
-
- `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Primary = Template.bind({});
-Primary.args = {
- color: 'primary',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
- color: 'secondary',
-};
-
-export const Dark = Template.bind({});
-Dark.args = {
- color: 'dark',
-};
-
-export const Shadow = Template.bind({});
-Shadow.args = {
- shadow: true,
-};
-
-export const Bordered = Template.bind({});
-Bordered.args = {
- bordered: true,
-};
-
-export const Fixed: StoryFn = (args) => ({
- components: {NavDrawer},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
- components: {NavDrawer},
- setup() {
- return {args};
- },
- template: `
- = (args) => ({
- components: {NavDrawer, Button},
- setup() {
- const isOpen = ref(true);
-
- return {args, isOpen};
- },
- template: `
- = (args) => ({
- components: {NavDrawer, Button},
- setup() {
- const isMini = ref(false);
-
- return {args, isMini};
- },
- template: `
- = (args) => ({
- components: {NavDrawer, Button},
- setup() {
- const isExpanded = ref(false);
-
- return {args, isExpanded};
- },
- template: `
- = (args) => ({
- components: {NavDrawer, Button},
- setup() {
- const isOpen = ref(true);
-
- return {args, isOpen};
- },
- template: `
- = (args) => ({
- components: {NavDrawer, Button},
- setup() {
- const isOpen = ref(true);
-
- return {args, isOpen};
- },
- template: `
- = (args) => ({
- components: {NavDrawerCustom},
- template: `
- = (args) => ({
- components: {NavDrawer},
- setup() {
- const colors = ['default', 'primary', 'secondary', 'dark'];
- return {args, colors};
- },
- template: `
- = (args) => ({
- components: {NavDrawer},
- setup() {
- return {args, navDrawerHeights};
- },
- template: `
-
-
-
-
-
-
-
-
- `,
-});
-
-export const Bottom: StoryFn = (args) => ({
- components: {NavDrawer, Button},
- setup() {
- const isOpen = ref(false);
-
- return {args, isOpen};
- },
- template: `
-
-
-
-
-
- `,
-});
-
-export const Top: StoryFn = (args) => ({
- components: {NavDrawer, Button},
- setup() {
- const isOpen = ref(false);
-
- return {args, isOpen};
- },
- template: `
-
-
-
-
-
- `,
-});
-
-export const Resizeable: StoryFn = (args) => ({
- components: {NavDrawer, Button},
- setup() {
- const isOpen = ref(true);
-
- return {args, isOpen};
- },
- template: `
-
-
-
- Main content
-
- `,
-});
+import { navDrawerHeights } from './types';
+import NavDrawer from './NavDrawer.vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue';
+import Button from '../../button/src';
+import { colors } from './colors';
+import NavDrawerCustom from './stories/NavDrawerCustom.vue';
+import NavDrawerResizer from './NavDrawerResizer.vue';
+
+export default {
+ title: 'Components/NavigationDrawer',
+ component: NavDrawer,
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { NavDrawer },
+ setup() {
+ return { args, colors };
+ },
+ template: `
+
+
+ `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Primary = Template.bind({});
+Primary.args = {
+ color: 'primary',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+ color: 'secondary',
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+ color: 'dark',
+};
+
+export const Shadow = Template.bind({});
+Shadow.args = {
+ shadow: true,
+};
+
+export const Bordered = Template.bind({});
+Bordered.args = {
+ bordered: true,
+};
+
+export const Fixed: StoryFn = (args) => ({
+ components: { NavDrawer },
+ setup() {
+ return { args };
+ },
+ template: `
+ = (args) => ({
+ components: { NavDrawer },
+ setup() {
+ return { args };
+ },
+ template: `
+ = (args) => ({
+ components: { NavDrawer, Button },
+ setup() {
+ const isOpen = ref(true);
+
+ return { args, isOpen };
+ },
+ template: `
+ = (args) => ({
+ components: { NavDrawer, Button },
+ setup() {
+ const isMini = ref(false);
+
+ return { args, isMini };
+ },
+ template: `
+ = (args) => ({
+ components: { NavDrawer, Button },
+ setup() {
+ const isExpanded = ref(false);
+
+ return { args, isExpanded };
+ },
+ template: `
+ = (args) => ({
+ components: { NavDrawer, Button },
+ setup() {
+ const isOpen = ref(true);
+
+ return { args, isOpen };
+ },
+ template: `
+ = (args) => ({
+ components: { NavDrawer, Button },
+ setup() {
+ const isOpen = ref(true);
+
+ return { args, isOpen };
+ },
+ template: `
+ = (args) => ({
+ components: { NavDrawerCustom },
+ template: `
+ = (args) => ({
+ components: { NavDrawer },
+ setup() {
+ const colors = ['default', 'primary', 'secondary', 'dark'];
+ return { args, colors };
+ },
+ template: `
+ = (args) => ({
+ components: { NavDrawer },
+ setup() {
+ return { args, navDrawerHeights };
+ },
+ template: `
+
+
+
+
+
+
+
+
+ `,
+});
+
+export const Bottom: StoryFn = (args) => ({
+ components: { NavDrawer, Button },
+ setup() {
+ const isOpen = ref(false);
+
+ return { args, isOpen };
+ },
+ template: `
+
+
+
+
+
+ `,
+});
+
+export const Top: StoryFn = (args) => ({
+ components: { NavDrawer, Button },
+ setup() {
+ const isOpen = ref(false);
+
+ return { args, isOpen };
+ },
+ template: `
+
+
+
+
+
+ `,
+});
+
+export const Resizeable: StoryFn = (args) => ({
+ components: { NavDrawer, Button },
+ setup() {
+ const isOpen = ref(true);
+
+ return { args, isOpen };
+ },
+ template: `
+
+
+
+ Main content
+
+ `,
+});
diff --git a/packages/nav-drawer/src/NavDrawer.vue b/packages/ui/src/nav-drawer/src/NavDrawer.vue
similarity index 96%
rename from packages/nav-drawer/src/NavDrawer.vue
rename to packages/ui/src/nav-drawer/src/NavDrawer.vue
index 00e6b584b..db7086ea6 100644
--- a/packages/nav-drawer/src/NavDrawer.vue
+++ b/packages/ui/src/nav-drawer/src/NavDrawer.vue
@@ -1,227 +1,227 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/nav-drawer/src/README.md b/packages/ui/src/nav-drawer/src/README.md
similarity index 100%
rename from packages/nav-drawer/src/README.md
rename to packages/ui/src/nav-drawer/src/README.md
diff --git a/packages/nav-drawer/src/Readme.stories.mdx b/packages/ui/src/nav-drawer/src/Readme.stories.mdx
similarity index 100%
rename from packages/nav-drawer/src/Readme.stories.mdx
rename to packages/ui/src/nav-drawer/src/Readme.stories.mdx
diff --git a/packages/nav-drawer/src/colors.ts b/packages/ui/src/nav-drawer/src/colors.ts
similarity index 100%
rename from packages/nav-drawer/src/colors.ts
rename to packages/ui/src/nav-drawer/src/colors.ts
diff --git a/packages/nav-drawer/src/deprecated/Changelog.stories.mdx b/packages/ui/src/nav-drawer/src/deprecated/Changelog.stories.mdx
similarity index 100%
rename from packages/nav-drawer/src/deprecated/Changelog.stories.mdx
rename to packages/ui/src/nav-drawer/src/deprecated/Changelog.stories.mdx
diff --git a/packages/nav-drawer/src/deprecated/Readme.stories.mdx b/packages/ui/src/nav-drawer/src/deprecated/Readme.stories.mdx
similarity index 100%
rename from packages/nav-drawer/src/deprecated/Readme.stories.mdx
rename to packages/ui/src/nav-drawer/src/deprecated/Readme.stories.mdx
diff --git a/packages/nav-drawer/src/deprecated/VNavDrawer.spec.ts b/packages/ui/src/nav-drawer/src/deprecated/VNavDrawer.spec.ts
similarity index 100%
rename from packages/nav-drawer/src/deprecated/VNavDrawer.spec.ts
rename to packages/ui/src/nav-drawer/src/deprecated/VNavDrawer.spec.ts
diff --git a/packages/nav-drawer/src/deprecated/VNavDrawer.stories.ts b/packages/ui/src/nav-drawer/src/deprecated/VNavDrawer.stories.ts
similarity index 94%
rename from packages/nav-drawer/src/deprecated/VNavDrawer.stories.ts
rename to packages/ui/src/nav-drawer/src/deprecated/VNavDrawer.stories.ts
index e3362f7fe..0b6a758e7 100644
--- a/packages/nav-drawer/src/deprecated/VNavDrawer.stories.ts
+++ b/packages/ui/src/nav-drawer/src/deprecated/VNavDrawer.stories.ts
@@ -1,7 +1,7 @@
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {ref} from 'vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue';
import VNavDrawer from './VNavDrawer.vue';
-import VBtn from '@morpheme/button';
+import VBtn from '../../../button/src';
const menus = [
{
@@ -114,10 +114,10 @@ export default {
} as Meta;
const Template: StoryFn = (args) => ({
- components: {VNavDrawer, VBtn},
+ components: { VNavDrawer, VBtn },
setup() {
const isOpen = ref(false);
- return {args, isOpen};
+ return { args, isOpen };
},
template: `
Default
@@ -269,7 +269,7 @@ export const InList: StoryDefault
diff --git a/packages/badge/src/VBadge.vue b/packages/ui/src/badge/src/VBadge.vue similarity index 98% rename from packages/badge/src/VBadge.vue rename to packages/ui/src/badge/src/VBadge.vue index b2dd11cf4..9c285cc17 100644 --- a/packages/badge/src/VBadge.vue +++ b/packages/ui/src/badge/src/VBadge.vue @@ -1,6 +1,6 @@ - - -
-
-
-
-
-
- Home
-
-
- Recents
-
-
- Favorites
-
-
- Nearby
-
-
- Account
-
-
-
- `,
-});
+import { VBtn } from '../../button/src';
+import { defaultColors } from '@morpheme/theme/defaultTheme';
+import type { StoryFn, Meta } from '@storybook/vue3';
+import VBottomNavigation from './VBottomNavigation.vue';
+import VBottomNavigationItem from './VBottomNavigationItem.vue';
+import { ref } from 'vue';
+
+export default {
+ title: 'Components/BottomNavigation',
+ component: VBottomNavigation,
+} as Meta;
+
+export const Default: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VBottomNavigation,
+ VBottomNavigationItem,
+ },
+ template: `
+
+
+
+
+
+
+ Home
+
+
+ Recents
+
+
+ Favorites
+
+
+ Nearby
+
+
+ Account
+
+
+
+ `,
+});
diff --git a/packages/bottom-navigation/src/VBottomNavigation.test.ts b/packages/ui/src/bottom-navigation/src/VBottomNavigation.test.ts
similarity index 100%
rename from packages/bottom-navigation/src/VBottomNavigation.test.ts
rename to packages/ui/src/bottom-navigation/src/VBottomNavigation.test.ts
diff --git a/packages/bottom-navigation/src/VBottomNavigation.vue b/packages/ui/src/bottom-navigation/src/VBottomNavigation.vue
similarity index 100%
rename from packages/bottom-navigation/src/VBottomNavigation.vue
rename to packages/ui/src/bottom-navigation/src/VBottomNavigation.vue
diff --git a/packages/bottom-navigation/src/VBottomNavigationItem.vue b/packages/ui/src/bottom-navigation/src/VBottomNavigationItem.vue
similarity index 98%
rename from packages/bottom-navigation/src/VBottomNavigationItem.vue
rename to packages/ui/src/bottom-navigation/src/VBottomNavigationItem.vue
index f6c18a8a9..c2ced2bd1 100644
--- a/packages/bottom-navigation/src/VBottomNavigationItem.vue
+++ b/packages/ui/src/bottom-navigation/src/VBottomNavigationItem.vue
@@ -1,5 +1,5 @@
-
-
-
-
-
-
-
+
+
+
+
-
-
+
+
+
+
+
+
diff --git a/packages/bottom-sheets/src/BottomSheetHeader.vue b/packages/ui/src/bottom-sheets/src/BottomSheetHeader.vue
similarity index 90%
rename from packages/bottom-sheets/src/BottomSheetHeader.vue
rename to packages/ui/src/bottom-sheets/src/BottomSheetHeader.vue
index 4ef2729d3..09dbe7612 100644
--- a/packages/bottom-sheets/src/BottomSheetHeader.vue
+++ b/packages/ui/src/bottom-sheets/src/BottomSheetHeader.vue
@@ -1,28 +1,28 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
+
+
+
diff --git a/packages/bottom-sheets/src/BottomSheetMenus.vue b/packages/ui/src/bottom-sheets/src/BottomSheetMenus.vue
similarity index 96%
rename from packages/bottom-sheets/src/BottomSheetMenus.vue
rename to packages/ui/src/bottom-sheets/src/BottomSheetMenus.vue
index 638d99b9b..ac0c8ee30 100644
--- a/packages/bottom-sheets/src/BottomSheetMenus.vue
+++ b/packages/ui/src/bottom-sheets/src/BottomSheetMenus.vue
@@ -1,7 +1,7 @@
-
-
-
+
+
+
-
-
-
-
`,
-});
-CustomDividerSlots.parameters = {
- docs: {
- source: {
- code: `
-
-
- `,
-});
+import { Dropdown, DropdownBtn, DropdownItem } from '../../dropdown/src';
+import VBreadcrumbs from './VBreadcrumbs.vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import Icon from '../../icon/src';
+import type { VBreadcrumbItemProps } from './types';
+import { ref } from 'vue';
+import VBreadcrumbsDivider from './VBreadcrumbsDivider.vue';
+import VBreadcrumbsItem from './VBreadcrumbsItem.vue';
+
+const items = [
+ {
+ title: 'Home',
+ to: '/',
+ },
+ {
+ title: 'Account',
+ to: '/account',
+ },
+ {
+ title: 'Profile',
+ to: '/account/profile',
+ },
+ {
+ title: 'Settings',
+ to: '/account/profile/settings',
+ disabled: true,
+ },
+];
+
+export default {
+ title: 'Components/Breadcrumbs',
+ component: VBreadcrumbs,
+ argTypes: {},
+ args: {
+ items,
+ divider: '/',
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { VBreadcrumbs },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
`,
+});
+CustomDividerSlots.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ `,
+});
diff --git a/packages/breadcrumbs/src/VBreadcrumbs.vue b/packages/ui/src/breadcrumbs/src/VBreadcrumbs.vue
similarity index 95%
rename from packages/breadcrumbs/src/VBreadcrumbs.vue
rename to packages/ui/src/breadcrumbs/src/VBreadcrumbs.vue
index 71d15d0c0..97d0cefb3 100644
--- a/packages/breadcrumbs/src/VBreadcrumbs.vue
+++ b/packages/ui/src/breadcrumbs/src/VBreadcrumbs.vue
@@ -1,56 +1,56 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/packages/breadcrumbs/src/VBreadcrumbsDivider.vue b/packages/ui/src/breadcrumbs/src/VBreadcrumbsDivider.vue
similarity index 100%
rename from packages/breadcrumbs/src/VBreadcrumbsDivider.vue
rename to packages/ui/src/breadcrumbs/src/VBreadcrumbsDivider.vue
diff --git a/packages/breadcrumbs/src/VBreadcrumbsItem.vue b/packages/ui/src/breadcrumbs/src/VBreadcrumbsItem.vue
similarity index 94%
rename from packages/breadcrumbs/src/VBreadcrumbsItem.vue
rename to packages/ui/src/breadcrumbs/src/VBreadcrumbsItem.vue
index 10d59e1b8..afbaf5e06 100644
--- a/packages/breadcrumbs/src/VBreadcrumbsItem.vue
+++ b/packages/ui/src/breadcrumbs/src/VBreadcrumbsItem.vue
@@ -1,50 +1,50 @@
-
-
-
-
-
- {{ args.label || color }}
-
-
- `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = {
- docs: {
- source: {
- code: `
-
`,
-});
-Sizes.parameters = {
- docs: {
- source: {
- code: `
-
-
-{{color}}
-
-
-
-
-
-
-
- Search
-
-
-
-
- Download
-
-
- `,
-});
-Icons.parameters = {
- docs: {
- source: {
- code: `
-
-
- `,
-});
-Fab.parameters = {
- docs: {
- source: {
- code: `
-
-
- `,
- },
- },
-};
-
-export const Plugin: StoryFnColors
-
-
-
-Shadow
-
-
-
-Outlined
-
-
-
-Text
-
-
-
-Rounded
-
-
-
-Tile
-
-
-
-Sizes
-
-
-
-Icon
-
-
-
-Icon FAB
-
-
-
- `,
-});
-
-export const DynamicProps: StoryFnDefault
-Sizes:
-
-
- Button
- Button
- Button
-
-
- sm
- sm
- sm
-
-
- lg
- lg
- lg
-
-
- Button
- Button
- Button
-
-
- Button
- Button
- Button
-
-
- Button
- Button
- Button
-
-
- Button
- Button
- Button
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-});
-
-export const Test: StoryFnColors
-
-
- {{ color }}
-
-
- Variants
-
-
- {{ variant }}
-
-
- {{ color }}
-
-
- Default
-Sizes:
-
+
+ {{ args.label || color }}
+
+
+ `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+ docs: {
+ source: {
+ code: `
+
`,
+});
+Sizes.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+{{color}}
+
+
+
+
+
+
+
+ Search
+
+
+
+
+ Download
+
+
+ `,
+});
+Icons.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ `,
+});
+Fab.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+ `,
+ },
+ },
+};
+
+export const Plugin: StoryFnColors
+
+
+
+Shadow
+
+
+
+Outlined
+
+
+
+Text
+
+
+
+Rounded
+
+
+
+Tile
+
+
+
+Sizes
+
+
+
+Icon
+
+
+
+Icon FAB
+
+
+
+ `,
+});
+
+export const DynamicProps: StoryFnDefault
+Sizes:
+
+
+ Button
+ Button
+ Button
+
+
+ sm
+ sm
+ sm
+
+
+ lg
+ lg
+ lg
+
+
+ Button
+ Button
+ Button
+
+
+ Button
+ Button
+ Button
+
+
+ Button
+ Button
+ Button
+
+
+ Button
+ Button
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+});
+
+export const Test: StoryFnColors
+
+
+ {{ color }}
+
+
+ Variants
+
+
+ {{ variant }}
+
+
+ {{ color }}
+
+
+ Default
+Sizes:
+My Header
-
-
- lorem ipsum body
-My Header
-
-
- lorem ipsum body
-
-
- {{ color }}
-
-
-
-
-
- Default
-
-
-
-
-
-
-
-
-
- As anchor
-
-
-
-
-
-
-
-
-
-
-
-`,
-});
-
-export const Bodyless: StoryFn<{}> = () => ({
- components: {VCard, VCardHeader, VCardFooter, VCardBody},
- setup() {
- return {defaultColors};
- },
- template: `
- With to props
With to props. As NuxtLink.
As anchor with target="_blank"
As anchor with target="_blank" and rel
As DummyLink
-
- Default
-
-
- Bodyless
-
-
-
- Bodyless with
-
-
-
-
-
- Bodyless with
-
-
-
-
-`,
-});
+import type { Meta, StoryFn } from '@storybook/vue3';
+import VCard from './VCard.vue';
+import VBtn from '../../button/src';
+import { defaultColors } from '@morpheme/theme/defaultTheme';
+import { defineComponent, ref } from 'vue';
+import VCardHeader from './VCardHeader.vue';
+import VCardFooter from './VCardFooter.vue';
+import VCardBody from './VCardBody.vue';
+
+export default {
+ title: 'Components/Card',
+ component: VCard,
+ argTypes: {},
+ args: {
+ title: 'Title',
+ body: 'Body',
+ footer: 'Footer',
+ headerClass: '',
+ footerClass: '',
+ bodyClass: '',
+ hideHeader: false,
+ hideFooter: false,
+ bordered: false,
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { VCard },
+ setup() {
+ return { args };
+ },
+ template: `
+ VCardBody
- Bodyless with VCardHeader
VCardBody
- Bodyless with VCardFooter
My Header
+
+
+ lorem ipsum body
+My Header
+
+
+ lorem ipsum body
+
+
+ {{ color }}
+
+
+
+
+
+ Default
+
+
+
+
+
+
+
+
+
+ As anchor
+
+
+
+
+
+
+
+
+
+
+
+`,
+});
+
+export const Bodyless: StoryFn<{}> = () => ({
+ components: { VCard, VCardHeader, VCardFooter, VCardBody },
+ setup() {
+ return { defaultColors };
+ },
+ template: `
+ With to props
With to props. As NuxtLink.
As anchor with target="_blank"
As anchor with target="_blank" and rel
As DummyLink
+
+ Default
+
+
+ Bodyless
+
+
+
+ Bodyless with
+
+
+
+
+
+ Bodyless with
+
+
+
+
+`,
+});
diff --git a/packages/card/src/VCard.vue b/packages/ui/src/card/src/VCard.vue
similarity index 95%
rename from packages/card/src/VCard.vue
rename to packages/ui/src/card/src/VCard.vue
index 5649a901e..3ab4612c7 100644
--- a/packages/card/src/VCard.vue
+++ b/packages/ui/src/card/src/VCard.vue
@@ -1,216 +1,216 @@
-
-
-
- VCardBody
+ Bodyless with VCardHeader
VCardBody
+ Bodyless with VCardFooter
-
-
-
- {{ title }}
-
-
-
-
-
+
+
+
+ {{ title }}
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
diff --git a/packages/collapsible/src/VCollapsible.spec.ts b/packages/ui/src/collapsible/src/VCollapsible.spec.ts
similarity index 100%
rename from packages/collapsible/src/VCollapsible.spec.ts
rename to packages/ui/src/collapsible/src/VCollapsible.spec.ts
diff --git a/packages/collapsible/src/VCollapsible.stories.ts b/packages/ui/src/collapsible/src/VCollapsible.stories.ts
similarity index 100%
rename from packages/collapsible/src/VCollapsible.stories.ts
rename to packages/ui/src/collapsible/src/VCollapsible.stories.ts
diff --git a/packages/collapsible/src/VCollapsible.vue b/packages/ui/src/collapsible/src/VCollapsible.vue
similarity index 98%
rename from packages/collapsible/src/VCollapsible.vue
rename to packages/ui/src/collapsible/src/VCollapsible.vue
index 6c76108f6..66f799335 100644
--- a/packages/collapsible/src/VCollapsible.vue
+++ b/packages/ui/src/collapsible/src/VCollapsible.vue
@@ -1,7 +1,7 @@
-
-
- Press CMD+K or Control+K to open the menu
- Selected: {{selected}}
- `,
-});
-
-export const WithButtonTrigger: StoryFn = (args) => ({
- setup() {
- const isOpen = ref(false)
- const selected = ref()
- return {args, selected, isOpen};
- },
- components: {
- VCommand,
- VBtn
- },
- template: `
- Selected: {{selected}}
- `,
-});
-
-export const ListProps: StoryFn = (args) => ({
- setup() {
- return {args};
- },
- components: {
- VCommand,
- VBtn
- },
- template: `
- Press CMD+K or Control+K to open the menu
-
- Press CMD+K or Control+K to open the menu
+ Selected: {{selected}}
+ `,
+});
+
+export const WithButtonTrigger: StoryFn = (args) => ({
+ setup() {
+ const isOpen = ref(false)
+ const selected = ref()
+ return { args, selected, isOpen };
+ },
+ components: {
+ VCommand,
+ VBtn
+ },
+ template: `
+ Selected: {{selected}}
+ `,
+});
+
+export const ListProps: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VCommand,
+ VBtn
+ },
+ template: `
+ Press CMD+K or Control+K to open the menu
+
+
-
-
-
-
-
- `,
+import { VLogo } from '../../logo/src';
+import { VMain } from '../../app-shell/src';
+import { VBtn } from '../../button/src';
+import { VAppBar } from '../../app-bar/src';
+import type { StoryFn, Meta } from '@storybook/vue3';
+import VDivider from './VDivider.vue';
+import { List as VList, ListItem as VListItem } from '../../list/src';
+
+export default {
+ title: 'Components/Divider',
+ component: VDivider,
+} as Meta;
+
+export const Default: StoryFn = (args) => ({
+ setup() {
+ return { args };
+ },
+ components: {
+ VDivider,
+ VList,
+ VListItem
+ },
+ template: `
+
+
+
+
+
+
+ `,
});
\ No newline at end of file
diff --git a/packages/divider/src/VDivider.test.ts b/packages/ui/src/divider/src/VDivider.test.ts
similarity index 100%
rename from packages/divider/src/VDivider.test.ts
rename to packages/ui/src/divider/src/VDivider.test.ts
diff --git a/packages/divider/src/VDivider.vue b/packages/ui/src/divider/src/VDivider.vue
similarity index 100%
rename from packages/divider/src/VDivider.vue
rename to packages/ui/src/divider/src/VDivider.vue
diff --git a/packages/divider/src/index.ts b/packages/ui/src/divider/src/index.ts
similarity index 97%
rename from packages/divider/src/index.ts
rename to packages/ui/src/divider/src/index.ts
index 572550876..298e3f57c 100644
--- a/packages/divider/src/index.ts
+++ b/packages/ui/src/divider/src/index.ts
@@ -1,2 +1,2 @@
-export {default as VDivider} from './VDivider.vue';
-export {default} from './VDivider.vue';
+export {default as VDivider} from './VDivider.vue';
+export {default} from './VDivider.vue';
diff --git a/packages/divider/src/stories/Changelog.stories.mdx b/packages/ui/src/divider/src/stories/Changelog.stories.mdx
similarity index 96%
rename from packages/divider/src/stories/Changelog.stories.mdx
rename to packages/ui/src/divider/src/stories/Changelog.stories.mdx
index 9b6b0853c..82b687196 100644
--- a/packages/divider/src/stories/Changelog.stories.mdx
+++ b/packages/ui/src/divider/src/stories/Changelog.stories.mdx
@@ -1,6 +1,6 @@
-import {Meta, Description} from '@storybook/addon-docs';
-import Changelog from '../../CHANGELOG.md';
-
-
-
-
-
- `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Right = Template.bind({});
-Right.args = {
- right: true,
-};
-
-export const Top = Template.bind({});
-Top.args = {
- top: true,
-};
-
-export const PrefixIcon = Template.bind({});
-PrefixIcon.args = {
- prefixIcon: 'ic:round-person',
- label: 'Account',
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
- items: [
- {
- text: 'Default',
- },
- {
- text: 'Disabled',
- disabled: true,
- },
- {
- text: 'RouterLink',
- to: '/home',
- disabled: true,
- },
- {
- text: 'NuxtLink',
- to: '/nuxt',
- nuxt: true,
- disabled: true,
- },
- {
- text: 'Go to Google',
- href: 'https://google.com',
- disabled: true,
- },
- {
- text: 'Go to Google (New Tab)',
- href: 'https://google.com',
- disabled: true,
- newTab: true,
- },
- ],
-};
-
-export const RouterLink = Template.bind({});
-RouterLink.args = {
- items: [
- {
- text: 'Home',
- to: '/home',
- },
- {
- text: 'Profile',
- to: '/profile',
- },
- {
- text: 'Settings',
- to: '/settings',
- },
- {
- divider: true,
- },
- {
- text: 'Go to Google',
- href: 'https://google.com',
- newTab: true,
- },
- ],
-};
-
-export const Href = Template.bind({});
-Href.args = {
- items: [
- {
- text: 'Link 1',
- href: '/home',
- },
- {
- text: 'Link 2',
- href: '/setting',
- newTab: true,
- },
- ],
-};
-
-export const Header = Template.bind({});
-Header.args = {
- items: [
- {
- text: 'Account',
- header: true,
- },
- {
- text: 'Profile',
- icon: 'ic:round-person',
- },
- {
- text: 'Preferences',
- icon: 'ic:round-settings',
- },
-
- {
- text: 'Settings',
- header: true,
- },
- {
- text: 'Dark Mode',
- icon: 'ic:round-dark-mode',
- },
- {
- text: 'Logout',
- icon: 'ic:round-logout',
- },
- ],
-};
-
-export const Slots: StoryFn = (args, {argTypes}) => ({
- components: {Dropdown, DropdownItem, DropdownHeader},
- setup() {
- return {args, argTypes};
- },
- template: `
-
-
-
-
-
-
-
-
- Action
-
-
- `,
-});
-
-export const CustomActivator: StoryFn = (args, {argTypes}) => ({
- components: {
- Dropdown,
- DropdownItem,
- DropdownButton,
- DropdownBtn,
- DropdownActivator,
- VIcon,
- },
- setup() {
- return {args, argTypes, Button};
- },
- template: `
- prepend slotappend slot
-
-
-
- Default
-
-
-
-
- VDropdownButton
-
-
-
-
-
-
-
-
-
- DropdownButton as VBtn
-
-
-
-
- With
-
-
-
-
-
- VDropdownBtn
-
-
-
-
-
-
-
-
-
- DropdownButton as VBtn
-
-
-
-
-
-
-
-
-
- DropdownButton as VDropdownItem
-
-
-
-
-
-
-
-
-
- DropdownButton as VDropdownHeader
-
-
-
-
-
-
-
-
-
- DropdownButton as btn
-
-
-
-
-
-
-
-
-
- DropdownButton as item
-
-
-
-
-
-
-
-
- `,
-});
-
-export const DarkMode: StoryFn<{}> = (args) => ({
- components: {Dropdown, DropdownItem, DropdownHeader},
- setup() {
- return {args};
- },
- template: `
-DropdownButton as header
-
-
- `,
-});
-FloatingUI.parameters = {
- layout: 'centered',
-};
-
-export const MultiLevel: StoryFn = (args, {argTypes}) => ({
- components: {Dropdown, DropdownItem, DropdownButton, DropdownHeader},
- setup() {
- return {args, argTypes, DropdownItem};
- },
- template: `
-
-
- Acme Inc.
-
-
- Home
-
-
-
-
- Products
-
-
-
-
-
-
-
-
-
-
-
-
- Settings
-
-
-
-
-
-
-
- `,
-});
-
-export const Sizes: StoryFn = (args, {argTypes}) => ({
- components: {Dropdown, DropdownItem, DropdownButton, DropdownHeader},
- setup() {
- return {args, argTypes, DropdownItem};
- },
- template: `
-
+
+ `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Right = Template.bind({});
+Right.args = {
+ right: true,
+};
+
+export const Top = Template.bind({});
+Top.args = {
+ top: true,
+};
+
+export const PrefixIcon = Template.bind({});
+PrefixIcon.args = {
+ prefixIcon: 'ic:round-person',
+ label: 'Account',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ items: [
+ {
+ text: 'Default',
+ },
+ {
+ text: 'Disabled',
+ disabled: true,
+ },
+ {
+ text: 'RouterLink',
+ to: '/home',
+ disabled: true,
+ },
+ {
+ text: 'NuxtLink',
+ to: '/nuxt',
+ nuxt: true,
+ disabled: true,
+ },
+ {
+ text: 'Go to Google',
+ href: 'https://google.com',
+ disabled: true,
+ },
+ {
+ text: 'Go to Google (New Tab)',
+ href: 'https://google.com',
+ disabled: true,
+ newTab: true,
+ },
+ ],
+};
+
+export const RouterLink = Template.bind({});
+RouterLink.args = {
+ items: [
+ {
+ text: 'Home',
+ to: '/home',
+ },
+ {
+ text: 'Profile',
+ to: '/profile',
+ },
+ {
+ text: 'Settings',
+ to: '/settings',
+ },
+ {
+ divider: true,
+ },
+ {
+ text: 'Go to Google',
+ href: 'https://google.com',
+ newTab: true,
+ },
+ ],
+};
+
+export const Href = Template.bind({});
+Href.args = {
+ items: [
+ {
+ text: 'Link 1',
+ href: '/home',
+ },
+ {
+ text: 'Link 2',
+ href: '/setting',
+ newTab: true,
+ },
+ ],
+};
+
+export const Header = Template.bind({});
+Header.args = {
+ items: [
+ {
+ text: 'Account',
+ header: true,
+ },
+ {
+ text: 'Profile',
+ icon: 'ic:round-person',
+ },
+ {
+ text: 'Preferences',
+ icon: 'ic:round-settings',
+ },
+
+ {
+ text: 'Settings',
+ header: true,
+ },
+ {
+ text: 'Dark Mode',
+ icon: 'ic:round-dark-mode',
+ },
+ {
+ text: 'Logout',
+ icon: 'ic:round-logout',
+ },
+ ],
+};
+
+export const Slots: StoryFn = (args, { argTypes }) => ({
+ components: { Dropdown, DropdownItem, DropdownHeader },
+ setup() {
+ return { args, argTypes };
+ },
+ template: `
+
+
+
+
+
+
+
+
+ Action
+
+
+ `,
+});
+
+export const CustomActivator: StoryFn = (args, { argTypes }) => ({
+ components: {
+ Dropdown,
+ DropdownItem,
+ DropdownButton,
+ DropdownBtn,
+ DropdownActivator,
+ VIcon,
+ },
+ setup() {
+ return { args, argTypes, Button };
+ },
+ template: `
+ prepend slotappend slot
+
+
+
+ Default
+
+
+
+
+ VDropdownButton
+
+
+
+
+
+
+
+
+
+ DropdownButton as VBtn
+
+
+
+
+ With
+
+
+
+
+
+ VDropdownBtn
+
+
+
+
+
+
+
+
+
+ DropdownButton as VBtn
+
+
+
+
+
+
+
+
+
+ DropdownButton as VDropdownItem
+
+
+
+
+
+
+
+
+
+ DropdownButton as VDropdownHeader
+
+
+
+
+
+
+
+
+
+ DropdownButton as btn
+
+
+
+
+
+
+
+
+
+ DropdownButton as item
+
+
+
+
+
+
+
+
+ `,
+});
+
+export const DarkMode: StoryFn<{}> = (args) => ({
+ components: { Dropdown, DropdownItem, DropdownHeader },
+ setup() {
+ return { args };
+ },
+ template: `
+DropdownButton as header
+
+
+ `,
+});
+FloatingUI.parameters = {
+ layout: 'centered',
+};
+
+export const MultiLevel: StoryFn = (args, { argTypes }) => ({
+ components: { Dropdown, DropdownItem, DropdownButton, DropdownHeader },
+ setup() {
+ return { args, argTypes, DropdownItem };
+ },
+ template: `
+
+
+ Acme Inc.
+
+
+ Home
+
+
+
+
+ Products
+
+
+
+
+
+
+
+
+
+
+
+
+ Settings
+
+
+
+
+
+
+
+ `,
+});
+
+export const Sizes: StoryFn = (args, { argTypes }) => ({
+ components: { Dropdown, DropdownItem, DropdownButton, DropdownHeader },
+ setup() {
+ return { args, argTypes, DropdownItem };
+ },
+ template: `
+
-
-
-
+
+
+
+
-
- {{ message }}
-
-
+
+
+
diff --git a/packages/editor/src/config.ts b/packages/ui/src/editor/src/config.ts
similarity index 100%
rename from packages/editor/src/config.ts
rename to packages/ui/src/editor/src/config.ts
diff --git a/packages/editor/src/index.ts b/packages/ui/src/editor/src/index.ts
similarity index 100%
rename from packages/editor/src/index.ts
rename to packages/ui/src/editor/src/index.ts
diff --git a/packages/editor/src/vue.d.ts b/packages/ui/src/editor/src/vue.d.ts
similarity index 100%
rename from packages/editor/src/vue.d.ts
rename to packages/ui/src/editor/src/vue.d.ts
diff --git a/packages/list/tailwind.config.js b/packages/ui/src/editor/tailwind.config.js
similarity index 100%
rename from packages/list/tailwind.config.js
rename to packages/ui/src/editor/tailwind.config.js
diff --git a/packages/list/tsconfig.json b/packages/ui/src/editor/tsconfig.json
similarity index 100%
rename from packages/list/tsconfig.json
rename to packages/ui/src/editor/tsconfig.json
diff --git a/packages/editor/vite.config.js b/packages/ui/src/editor/vite.config.js
similarity index 100%
rename from packages/editor/vite.config.js
rename to packages/ui/src/editor/vite.config.js
diff --git a/packages/forms/CHANGELOG.md b/packages/ui/src/forms/CHANGELOG.md
similarity index 100%
rename from packages/forms/CHANGELOG.md
rename to packages/ui/src/forms/CHANGELOG.md
diff --git a/packages/forms/README.md b/packages/ui/src/forms/README.md
similarity index 100%
rename from packages/forms/README.md
rename to packages/ui/src/forms/README.md
diff --git a/packages/forms/package.json b/packages/ui/src/forms/package.json
similarity index 100%
rename from packages/forms/package.json
rename to packages/ui/src/forms/package.json
diff --git a/packages/logo/postcss.config.js b/packages/ui/src/forms/postcss.config.js
similarity index 100%
rename from packages/logo/postcss.config.js
rename to packages/ui/src/forms/postcss.config.js
diff --git a/packages/forms/src/Changelog.stories.mdx b/packages/ui/src/forms/src/Changelog.stories.mdx
similarity index 100%
rename from packages/forms/src/Changelog.stories.mdx
rename to packages/ui/src/forms/src/Changelog.stories.mdx
diff --git a/packages/forms/src/ErrorMessage.vue b/packages/ui/src/forms/src/ErrorMessage.vue
similarity index 100%
rename from packages/forms/src/ErrorMessage.vue
rename to packages/ui/src/forms/src/ErrorMessage.vue
diff --git a/packages/forms/src/FormField.stories.ts b/packages/ui/src/forms/src/FormField.stories.ts
similarity index 95%
rename from packages/forms/src/FormField.stories.ts
rename to packages/ui/src/forms/src/FormField.stories.ts
index 900b11bff..fc48d8767 100644
--- a/packages/forms/src/FormField.stories.ts
+++ b/packages/ui/src/forms/src/FormField.stories.ts
@@ -1,83 +1,83 @@
-import { ref } from 'vue';
-import FormField from './FormField.vue';
-import type { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
- title: 'Experimental/Forms/Field',
- component: FormField,
-} as Meta;
-
-export const Default: StoryFn
+
+ {{ message }}
+
+
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ hint }}
-
-
-
-
- {{ errorMessage }}
-
-
-
+
+
+
+
+
diff --git a/packages/forms/src/Readme.stories.mdx b/packages/ui/src/forms/src/Readme.stories.mdx
similarity index 100%
rename from packages/forms/src/Readme.stories.mdx
rename to packages/ui/src/forms/src/Readme.stories.mdx
diff --git a/packages/forms/src/checkbox/Checkbox.stories.ts b/packages/ui/src/forms/src/checkbox/Checkbox.stories.ts
similarity index 82%
rename from packages/forms/src/checkbox/Checkbox.stories.ts
rename to packages/ui/src/forms/src/checkbox/Checkbox.stories.ts
index 5019a089f..525add7a6 100644
--- a/packages/forms/src/checkbox/Checkbox.stories.ts
+++ b/packages/ui/src/forms/src/checkbox/Checkbox.stories.ts
@@ -1,196 +1,196 @@
-import VCheckbox from './Checkbox.vue';
-import {ref, computed} from 'vue';
-import {themeColors} from '@morpheme/utils/colors';
-import {sizes} from '@morpheme/utils/sizes';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {useForm} from 'vee-validate';
-import {object, boolean} from 'yup';
-import VBtn from '@morpheme/button';
-import CheckboxField from './CheckboxField.vue';
-
-export default {
- title: 'Experimental/Forms/Checkbox',
- component: VCheckbox,
- argTypes: {
- size: {
- control: 'select',
- options: sizes,
- },
- color: {
- control: 'select',
- options: themeColors,
- },
- },
- args: {
- label: 'Label',
- id: 'checkbox',
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VCheckbox},
- setup() {
- const value = ref(false);
- return {args, value};
- },
- template: `
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ hint }}
+
+
+
+
+ {{ errorMessage }}
+
+
+ Value: {{ value }}
- `,
-});
-
-export const Variants: StoryFn = (args) => ({
- components: {VCheckbox},
- setup() {
- const value = ref(false);
- return {args, value};
- },
- template: `
- Model value: {{ single }}
-
- Multiple
-Model value: {{ multiple }}
- `,
-});
-
-export const Checkbox = Template.bind({});
-Checkbox.args = {};
-Checkbox.parameters = {
- docs: {
- source: {
- code: `
-
- `,
-});
+import VCheckbox from './Checkbox.vue';
+import { ref, computed } from 'vue';
+import { themeColors } from '@morpheme/utils/colors';
+import { sizes } from '@morpheme/utils/sizes';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { useForm } from 'vee-validate';
+import { object, boolean } from 'yup';
+import VBtn from '../../../button/src';
+import CheckboxField from './CheckboxField.vue';
+
+export default {
+ title: 'Experimental/Forms/Checkbox',
+ component: VCheckbox,
+ argTypes: {
+ size: {
+ control: 'select',
+ options: sizes,
+ },
+ color: {
+ control: 'select',
+ options: themeColors,
+ },
+ },
+ args: {
+ label: 'Label',
+ id: 'checkbox',
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { VCheckbox },
+ setup() {
+ const value = ref(false);
+ return { args, value };
+ },
+ template: `
+ Value: {{ value }}
+ `,
+});
+
+export const Variants: StoryFn = (args) => ({
+ components: { VCheckbox },
+ setup() {
+ const value = ref(false);
+ return { args, value };
+ },
+ template: `
+ Model value: {{ single }}
+
+ Multiple
+Model value: {{ multiple }}
+ `,
+});
+
+export const Checkbox = Template.bind({});
+Checkbox.args = {};
+Checkbox.parameters = {
+ docs: {
+ source: {
+ code: `
+
+ `,
+});
diff --git a/packages/forms/src/checkbox/Checkbox.vue b/packages/ui/src/forms/src/checkbox/Checkbox.vue
similarity index 94%
rename from packages/forms/src/checkbox/Checkbox.vue
rename to packages/ui/src/forms/src/checkbox/Checkbox.vue
index 7a84bfb0d..bcb35587a 100644
--- a/packages/forms/src/checkbox/Checkbox.vue
+++ b/packages/ui/src/forms/src/checkbox/Checkbox.vue
@@ -1,134 +1,134 @@
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
- {{ errorMessage }}
-
-
-
+
+
diff --git a/packages/forms/src/checkbox/CheckboxField.vue b/packages/ui/src/forms/src/checkbox/CheckboxField.vue
similarity index 100%
rename from packages/forms/src/checkbox/CheckboxField.vue
rename to packages/ui/src/forms/src/checkbox/CheckboxField.vue
diff --git a/packages/forms/src/checkbox/VCheckbox.dark.scss b/packages/ui/src/forms/src/checkbox/VCheckbox.dark.scss
similarity index 100%
rename from packages/forms/src/checkbox/VCheckbox.dark.scss
rename to packages/ui/src/forms/src/checkbox/VCheckbox.dark.scss
diff --git a/packages/forms/src/checkbox/VCheckbox.scss b/packages/ui/src/forms/src/checkbox/VCheckbox.scss
similarity index 100%
rename from packages/forms/src/checkbox/VCheckbox.scss
rename to packages/ui/src/forms/src/checkbox/VCheckbox.scss
diff --git a/packages/forms/src/checkbox/VCheckbox.spec.ts b/packages/ui/src/forms/src/checkbox/VCheckbox.spec.ts
similarity index 100%
rename from packages/forms/src/checkbox/VCheckbox.spec.ts
rename to packages/ui/src/forms/src/checkbox/VCheckbox.spec.ts
diff --git a/packages/forms/src/checkbox/VCheckbox.stories.ts b/packages/ui/src/forms/src/checkbox/VCheckbox.stories.ts
similarity index 83%
rename from packages/forms/src/checkbox/VCheckbox.stories.ts
rename to packages/ui/src/forms/src/checkbox/VCheckbox.stories.ts
index c3ff1bd29..1d0a9da94 100644
--- a/packages/forms/src/checkbox/VCheckbox.stories.ts
+++ b/packages/ui/src/forms/src/checkbox/VCheckbox.stories.ts
@@ -1,373 +1,373 @@
-import VCheckbox from './VCheckbox.vue';
-import {ref} from 'vue';
-import {themeColors} from '@morpheme/utils/colors';
-import {sizes} from '@morpheme/utils/sizes';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {useForm} from 'vee-validate';
-import {object, boolean, array} from 'yup';
-import VBtn from '@morpheme/button';
-
-export default {
- title: 'Forms/Checkbox',
- component: VCheckbox,
- argTypes: {
- size: {
- control: 'select',
- options: sizes,
- },
- color: {
- control: 'select',
- options: themeColors,
- },
- },
- args: {
- label: 'Label',
- useForm: false,
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VCheckbox},
- setup() {
- const value = ref(false);
- return {args, value};
- },
- template: `
-
+
+
+
+
+
+
+ {{ errorMessage }}
+
+
+ Value: {{ value }}
- `,
-});
-
-export const Variants: StoryFn = (args) => ({
- components: {VCheckbox},
- setup() {
- const value = ref(false);
- return {args, value};
- },
- template: `
-
-
- `,
-});
+import VCheckbox from './VCheckbox.vue';
+import { ref } from 'vue';
+import { themeColors } from '@morpheme/utils/colors';
+import { sizes } from '@morpheme/utils/sizes';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { useForm } from 'vee-validate';
+import { object, boolean, array } from 'yup';
+import VBtn from '../../../button/src';
+
+export default {
+ title: 'Forms/Checkbox',
+ component: VCheckbox,
+ argTypes: {
+ size: {
+ control: 'select',
+ options: sizes,
+ },
+ color: {
+ control: 'select',
+ options: themeColors,
+ },
+ },
+ args: {
+ label: 'Label',
+ useForm: false,
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { VCheckbox },
+ setup() {
+ const value = ref(false);
+ return { args, value };
+ },
+ template: `
+ Value: {{ value }}
+ `,
+});
+
+export const Variants: StoryFn = (args) => ({
+ components: { VCheckbox },
+ setup() {
+ const value = ref(false);
+ return { args, value };
+ },
+ template: `
+
+
+ `,
+});
diff --git a/packages/forms/src/checkbox/VCheckbox.vue b/packages/ui/src/forms/src/checkbox/VCheckbox.vue
similarity index 95%
rename from packages/forms/src/checkbox/VCheckbox.vue
rename to packages/ui/src/forms/src/checkbox/VCheckbox.vue
index dc7c515aa..f49da641c 100644
--- a/packages/forms/src/checkbox/VCheckbox.vue
+++ b/packages/ui/src/forms/src/checkbox/VCheckbox.vue
@@ -1,157 +1,157 @@
-
-
-
-
-
-
+import {useFormValue} from '../composables';
+
+type CheckboxValue = any[] | boolean | undefined;
+
+const props = defineProps({
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
+ label: {
+ type: String,
+ default: '',
+ },
+ inputClass: {
+ type: String,
+ default: '',
+ },
+ color: {
+ type: String,
+ default: 'primary',
+ },
+ size: {
+ type: String,
+ default: '',
+ },
+ validationMode: {
+ type: String as PropType
-
-
-
-
-
- {{ errorMessage }}
-
-
+
+
diff --git a/packages/forms/src/checkbox/index.ts b/packages/ui/src/forms/src/checkbox/index.ts
similarity index 100%
rename from packages/forms/src/checkbox/index.ts
rename to packages/ui/src/forms/src/checkbox/index.ts
diff --git a/packages/forms/src/composables/index.ts b/packages/ui/src/forms/src/composables/index.ts
similarity index 100%
rename from packages/forms/src/composables/index.ts
rename to packages/ui/src/forms/src/composables/index.ts
diff --git a/packages/forms/src/composables/useFormValue.ts b/packages/ui/src/forms/src/composables/useFormValue.ts
similarity index 100%
rename from packages/forms/src/composables/useFormValue.ts
rename to packages/ui/src/forms/src/composables/useFormValue.ts
diff --git a/packages/forms/src/file-input/FileInput.stories.ts b/packages/ui/src/forms/src/file-input/FileInput.stories.ts
similarity index 90%
rename from packages/forms/src/file-input/FileInput.stories.ts
rename to packages/ui/src/forms/src/file-input/FileInput.stories.ts
index 8bc02f893..f3655e4f3 100644
--- a/packages/forms/src/file-input/FileInput.stories.ts
+++ b/packages/ui/src/forms/src/file-input/FileInput.stories.ts
@@ -1,275 +1,275 @@
-import type {Story, Meta} from '@storybook/vue3';
-import VBtn from '@morpheme/button'
-import { Field, useForm } from 'vee-validate';
-import { ref } from 'vue';
-import { array, object } from 'yup';
-import FileInput from './FileInput.vue';
-import FileInputField from './FileInputField.vue';
-import FileInputDefaultActivator from './FileInputDefaultActivator.vue';
-import FileInputButtonActivator from './FileInputButtonActivator.vue';
-import FileInputItem from './FileInputItem.vue';
-import FileInputItems from './FileInputItems.vue';
-
-export default {
- title: 'Experimental/Forms/FileInput',
- component: FileInput,
- subcomponents: {FileInputField, FileInputDefaultActivator},
-} as Meta;
-
-export const Default: Story<{}> = (args) => ({
- components: {
- FileInput,
- VBtn
- },
- setup() {
- const value = ref()
- return {args, value};
- },
- template: `
-
+
+
+
+
+
+ {{ errorMessage }}
+
+ Debug:
- Model Value: {{ value }}
- `,
-});
-
-export const Multiple = Default.bind({});
-Multiple.args = {
- multiple: true,
-};
-
-export const Accept = Default.bind({});
-Accept.args = {
- accept: 'image/*'
-};
-
-export const Error = Default.bind({});
-Error.args = {
- error: true,
- errorMessage: 'This field is required'
-};
-
-export const LabelAndHint = Default.bind({});
-LabelAndHint.args = {
- label: 'File',
- hint: 'Max 1MB. Only images are allowed.'
-};
-
-export const ButtonVariant = Default.bind({});
-ButtonVariant.args = {
- variant: 'button',
-};
-
-export const VariantProps = Default.bind({});
-VariantProps.args = {
- label: 'File',
- variantProps: {
- hint: 'Max 1MB. Only images are allowed.'
- }
-};
-
-export const CustomSlot: Story<{}> = (args) => ({
- components: {
- FileInput,
- VBtn
- },
- setup() {
- const value = ref()
- return {args, value};
- },
- template: `
- -
-
- - {{ file.name }} - -
Debug:
- Model Value: {{ value }}
- `,
-});
-
-export const FormValidation: Story<{}> = (args) => ({
- components: {
- FileInput,
- VBtn,
- Field,
- FileInputField
- },
- setup() {
- const {handleSubmit, values, errors, resetForm} = useForm({
- validationSchema: object({
- files: array()
- .required()
- .test('fileSize', 'File too large. Max 1MB.', (value) => {
- if (!value?.[0]) return true;
-
- return value?.[0]?.size < 1000000;
- })
- .label('File'),
- avatar: array()
- .required()
- .test('fileSize', 'File too large. Max 1MB.', (value) => {
- if (!value?.[0]) return true;
-
- return value?.[0]?.size < 1000000;
- })
- .test('fileType', 'Unsupported Format', (value) => {
- if (!value?.[0]) return true;
- return value?.[0]?.type?.startsWith('image');
- })
- .label('Avatar')
- })
- });
- const onSubmit = handleSubmit((values) => {
- console.log(values)
- })
- return {args, onSubmit, values, errors, resetForm};
- },
- template: `
-
- `,
-});
-
-export const DefaultActivator: Story<{}> = (args) => ({
- components: {
- FileInput,
- VBtn,
- FileInputDefaultActivator,
- FileInputItem
- },
- setup() {
- const value = ref()
- const disabled = ref(false)
- return {args, value, disabled};
- },
- template: `
- Debug:
- Model Value: {{ value }}
- `,
-});
-
-export const ButtonActivator: Story<{}> = (args) => ({
- components: {
- FileInput,
- VBtn,
- FileInputButtonActivator,
- FileInputItems
- },
- setup() {
- const value = ref()
- return {args, value};
- },
- template: `
- - Max 1MB. Only images are allowed. -
- -Debug:
- Model Value: {{ value }}
- `,
+import type { Story, Meta } from '@storybook/vue3';
+import VBtn from '../../../button/src'
+import { Field, useForm } from 'vee-validate';
+import { ref } from 'vue';
+import { array, object } from 'yup';
+import FileInput from './FileInput.vue';
+import FileInputField from './FileInputField.vue';
+import FileInputDefaultActivator from './FileInputDefaultActivator.vue';
+import FileInputButtonActivator from './FileInputButtonActivator.vue';
+import FileInputItem from './FileInputItem.vue';
+import FileInputItems from './FileInputItems.vue';
+
+export default {
+ title: 'Experimental/Forms/FileInput',
+ component: FileInput,
+ subcomponents: { FileInputField, FileInputDefaultActivator },
+} as Meta;
+
+export const Default: Story<{}> = (args) => ({
+ components: {
+ FileInput,
+ VBtn
+ },
+ setup() {
+ const value = ref()
+ return { args, value };
+ },
+ template: `
+ Debug:
+ Model Value: {{ value }}
+ `,
+});
+
+export const Multiple = Default.bind({});
+Multiple.args = {
+ multiple: true,
+};
+
+export const Accept = Default.bind({});
+Accept.args = {
+ accept: 'image/*'
+};
+
+export const Error = Default.bind({});
+Error.args = {
+ error: true,
+ errorMessage: 'This field is required'
+};
+
+export const LabelAndHint = Default.bind({});
+LabelAndHint.args = {
+ label: 'File',
+ hint: 'Max 1MB. Only images are allowed.'
+};
+
+export const ButtonVariant = Default.bind({});
+ButtonVariant.args = {
+ variant: 'button',
+};
+
+export const VariantProps = Default.bind({});
+VariantProps.args = {
+ label: 'File',
+ variantProps: {
+ hint: 'Max 1MB. Only images are allowed.'
+ }
+};
+
+export const CustomSlot: Story<{}> = (args) => ({
+ components: {
+ FileInput,
+ VBtn
+ },
+ setup() {
+ const value = ref()
+ return { args, value };
+ },
+ template: `
+ -
+
- + {{ file.name }} + +
Debug:
+ Model Value: {{ value }}
+ `,
+});
+
+export const FormValidation: Story<{}> = (args) => ({
+ components: {
+ FileInput,
+ VBtn,
+ Field,
+ FileInputField
+ },
+ setup() {
+ const { handleSubmit, values, errors, resetForm } = useForm({
+ validationSchema: object({
+ files: array()
+ .required()
+ .test('fileSize', 'File too large. Max 1MB.', (value) => {
+ if (!value?.[0]) return true;
+
+ return value?.[0]?.size < 1000000;
+ })
+ .label('File'),
+ avatar: array()
+ .required()
+ .test('fileSize', 'File too large. Max 1MB.', (value) => {
+ if (!value?.[0]) return true;
+
+ return value?.[0]?.size < 1000000;
+ })
+ .test('fileType', 'Unsupported Format', (value) => {
+ if (!value?.[0]) return true;
+ return value?.[0]?.type?.startsWith('image');
+ })
+ .label('Avatar')
+ })
+ });
+ const onSubmit = handleSubmit((values) => {
+ console.log(values)
+ })
+ return { args, onSubmit, values, errors, resetForm };
+ },
+ template: `
+
+ `,
+});
+
+export const DefaultActivator: Story<{}> = (args) => ({
+ components: {
+ FileInput,
+ VBtn,
+ FileInputDefaultActivator,
+ FileInputItem
+ },
+ setup() {
+ const value = ref()
+ const disabled = ref(false)
+ return { args, value, disabled };
+ },
+ template: `
+ Debug:
+ Model Value: {{ value }}
+ `,
+});
+
+export const ButtonActivator: Story<{}> = (args) => ({
+ components: {
+ FileInput,
+ VBtn,
+ FileInputButtonActivator,
+ FileInputItems
+ },
+ setup() {
+ const value = ref()
+ return { args, value };
+ },
+ template: `
+ + Max 1MB. Only images are allowed. +
+ +Debug:
+ Model Value: {{ value }}
+ `,
});
\ No newline at end of file
diff --git a/packages/forms/src/file-input/FileInput.vue b/packages/ui/src/forms/src/file-input/FileInput.vue
similarity index 100%
rename from packages/forms/src/file-input/FileInput.vue
rename to packages/ui/src/forms/src/file-input/FileInput.vue
diff --git a/packages/forms/src/file-input/FileInputButtonActivator.vue b/packages/ui/src/forms/src/file-input/FileInputButtonActivator.vue
similarity index 89%
rename from packages/forms/src/file-input/FileInputButtonActivator.vue
rename to packages/ui/src/forms/src/file-input/FileInputButtonActivator.vue
index 3e3323670..624c46f3a 100644
--- a/packages/forms/src/file-input/FileInputButtonActivator.vue
+++ b/packages/ui/src/forms/src/file-input/FileInputButtonActivator.vue
@@ -1,5 +1,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
- {{ hint }}
-
-
- {{ errorMessage }}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/forms/src/file-input/VFileUploadActions.vue b/packages/ui/src/forms/src/file-input/VFileUploadActions.vue
similarity index 96%
rename from packages/forms/src/file-input/VFileUploadActions.vue
rename to packages/ui/src/forms/src/file-input/VFileUploadActions.vue
index 5a4277ffc..31ab473e6 100644
--- a/packages/forms/src/file-input/VFileUploadActions.vue
+++ b/packages/ui/src/forms/src/file-input/VFileUploadActions.vue
@@ -1,5 +1,5 @@
-
-
-
+ {{ hint }}
+
+
+ {{ errorMessage }}
+
+
-
-
+
+
+
+
-
- {{ viewFileText }}
-
-
-
-
-
- {{ fileName }}
-
-
-
- {{ placeholder }}
-
-
-
-
-
-
- {{ hasFile ? changeText : browseText }}
-
-
-
-
-
- {{ removeText }}
-
-
-
+
+
diff --git a/packages/forms/src/file-input/VFileUploadDefaultTheme.vue b/packages/ui/src/forms/src/file-input/VFileUploadDefaultTheme.vue
similarity index 97%
rename from packages/forms/src/file-input/VFileUploadDefaultTheme.vue
rename to packages/ui/src/forms/src/file-input/VFileUploadDefaultTheme.vue
index 65ee86480..961612915 100644
--- a/packages/forms/src/file-input/VFileUploadDefaultTheme.vue
+++ b/packages/ui/src/forms/src/file-input/VFileUploadDefaultTheme.vue
@@ -5,7 +5,7 @@ export default {
-
-
-
+
+ {{ viewFileText }}
+
+
+
+
+
+ {{ fileName }}
+
+
+
+ {{ placeholder }}
+
+
+
+
+
+
+ {{ hasFile ? changeText : browseText }}
+
+
+
+
+
+ {{ removeText }}
+
+
+
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
- {{ fileName }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ dragText }}
-{{ hint }}
-
+
+
diff --git a/packages/forms/src/file-input/VFileUploadImageTheme.vue b/packages/ui/src/forms/src/file-input/VFileUploadImageTheme.vue
similarity index 92%
rename from packages/forms/src/file-input/VFileUploadImageTheme.vue
rename to packages/ui/src/forms/src/file-input/VFileUploadImageTheme.vue
index 5c7c4a6bc..d838e0619 100644
--- a/packages/forms/src/file-input/VFileUploadImageTheme.vue
+++ b/packages/ui/src/forms/src/file-input/VFileUploadImageTheme.vue
@@ -1,81 +1,81 @@
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ fileName }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ dragText }}
+{{ hint }}
+
-
-
-
+
+
+
+
+
+
+
diff --git a/packages/forms/src/file-input/index.ts b/packages/ui/src/forms/src/file-input/index.ts
similarity index 100%
rename from packages/forms/src/file-input/index.ts
rename to packages/ui/src/forms/src/file-input/index.ts
diff --git a/packages/forms/src/file-input/types.ts b/packages/ui/src/forms/src/file-input/types.ts
similarity index 100%
rename from packages/forms/src/file-input/types.ts
rename to packages/ui/src/forms/src/file-input/types.ts
diff --git a/packages/forms/src/form-group/VFormGroup.spec.ts b/packages/ui/src/forms/src/form-group/VFormGroup.spec.ts
similarity index 100%
rename from packages/forms/src/form-group/VFormGroup.spec.ts
rename to packages/ui/src/forms/src/form-group/VFormGroup.spec.ts
diff --git a/packages/forms/src/form-group/VFormGroup.stories.ts b/packages/ui/src/forms/src/form-group/VFormGroup.stories.ts
similarity index 100%
rename from packages/forms/src/form-group/VFormGroup.stories.ts
rename to packages/ui/src/forms/src/form-group/VFormGroup.stories.ts
diff --git a/packages/forms/src/form-group/VFormGroup.vue b/packages/ui/src/forms/src/form-group/VFormGroup.vue
similarity index 100%
rename from packages/forms/src/form-group/VFormGroup.vue
rename to packages/ui/src/forms/src/form-group/VFormGroup.vue
diff --git a/packages/forms/src/form-select/Select.stories.ts b/packages/ui/src/forms/src/form-select/Select.stories.ts
similarity index 85%
rename from packages/forms/src/form-select/Select.stories.ts
rename to packages/ui/src/forms/src/form-select/Select.stories.ts
index 520385483..daf922126 100644
--- a/packages/forms/src/form-select/Select.stories.ts
+++ b/packages/ui/src/forms/src/form-select/Select.stories.ts
@@ -1,233 +1,233 @@
-import type {StoryFn, Meta} from '@storybook/vue3';
-import {sizes} from '@morpheme/utils/sizes';
-import {useForm} from 'vee-validate';
-import {object, string} from 'yup';
-import {ref} from 'vue';
-import VBtn from '@morpheme/button';
-import Select from './Select.vue';
-import SelectField from './SelectField.vue';
-
-function createItems(length = 5, additionalAttrs = {}) {
- return [...Array(length)].map((_, index) => ({
- value: index + 1,
- label: `Option ${index + 1}`,
- ...additionalAttrs,
- }));
-}
-
-const items = createItems();
-
-const groupItems = createItems(5, {
- options: createItems(5),
-});
-
-export default {
- title: 'Experimental/Forms/Select',
- component: Select,
- argTypes: {
- size: {
- control: 'select',
- options: sizes,
- },
- },
- args: {
- options: [
- {
- label: 'Choose',
- value: '',
- },
- ...items,
- {
- label: 'Disabled item',
- value: 'x',
- disabled: true,
- },
- ],
- },
-} as Meta;
-
-const Template: StoryFnModel Value: {{ value }}
- `,
-});
-
-export const Shadow = Template.bind({});
-Shadow.args = {
- shadow: true,
-};
-Shadow.parameters = {
- docs: {
- source: {
- code: '',
- },
- },
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
- disabled: true,
-};
-Disabled.parameters = {
- docs: {
- source: {
- code: '',
- },
- },
-};
-
-export const Error = Template.bind({});
-Error.args = {
- error: true,
- errorMessage: 'Field is required',
-};
-
-export const Label = Template.bind({});
-Label.args = {
- label: 'My Label',
-};
-Label.parameters = {
- docs: {
- source: {
- code: ``,
- },
- },
-};
-
-export const Hint = Template.bind({});
-Hint.args = {
- label: 'Label',
- hint: 'This is a hint',
-};
-Hint.parameters = {
- docs: {
- source: {
- code: ``,
- },
- },
-};
-
-export const Validation: StoryFn<{}> = (args) => ({
- components: {VBtn, SelectField},
- setup() {
- const schema = object({
- genre: string().required().label('Genre'),
- gender: string().required().label('Gender'),
- });
-
- const {handleSubmit, resetForm, values} = useForm({
- validationSchema: schema,
- });
-
- const onSubmit = handleSubmit((values) => {
- alert(JSON.stringify(values));
- });
-
- const genders = ref([
- {
- text: 'Select Gender',
- value: '',
- disabled: true,
- },
- {
- text: 'Male',
- value: 'male',
- },
- {
- text: 'Female',
- value: 'female',
- },
- ]);
-
- const genres = ref([
- {
- text: 'Select Genre',
- value: '',
- disabled: true,
- },
- {
- text: 'Pop',
- value: 'pop',
- },
- {
- text: 'Rock',
- value: 'rock',
- },
- ]);
-
- return {onSubmit, resetForm, values, genders, genres};
- },
- template: `
-
-`,
-});
-
-export const DarkMode: StoryFn = (args) => ({
- components: {Select},
- setup() {
- return {args};
- },
- template: `
-
-
-
- `,
-});
+import type { StoryFn, Meta } from '@storybook/vue3';
+import { sizes } from '@morpheme/utils/sizes';
+import { useForm } from 'vee-validate';
+import { object, string } from 'yup';
+import { ref } from 'vue';
+import VBtn from '../../../button/src';
+import Select from './Select.vue';
+import SelectField from './SelectField.vue';
+
+function createItems(length = 5, additionalAttrs = {}) {
+ return [...Array(length)].map((_, index) => ({
+ value: index + 1,
+ label: `Option ${index + 1}`,
+ ...additionalAttrs,
+ }));
+}
+
+const items = createItems();
+
+const groupItems = createItems(5, {
+ options: createItems(5),
+});
+
+export default {
+ title: 'Experimental/Forms/Select',
+ component: Select,
+ argTypes: {
+ size: {
+ control: 'select',
+ options: sizes,
+ },
+ },
+ args: {
+ options: [
+ {
+ label: 'Choose',
+ value: '',
+ },
+ ...items,
+ {
+ label: 'Disabled item',
+ value: 'x',
+ disabled: true,
+ },
+ ],
+ },
+} as Meta;
+
+const Template: StoryFnModel Value: {{ value }}
+ `,
+});
+
+export const Shadow = Template.bind({});
+Shadow.args = {
+ shadow: true,
+};
+Shadow.parameters = {
+ docs: {
+ source: {
+ code: '',
+ },
+ },
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ disabled: true,
+};
+Disabled.parameters = {
+ docs: {
+ source: {
+ code: '',
+ },
+ },
+};
+
+export const Error = Template.bind({});
+Error.args = {
+ error: true,
+ errorMessage: 'Field is required',
+};
+
+export const Label = Template.bind({});
+Label.args = {
+ label: 'My Label',
+};
+Label.parameters = {
+ docs: {
+ source: {
+ code: ``,
+ },
+ },
+};
+
+export const Hint = Template.bind({});
+Hint.args = {
+ label: 'Label',
+ hint: 'This is a hint',
+};
+Hint.parameters = {
+ docs: {
+ source: {
+ code: ``,
+ },
+ },
+};
+
+export const Validation: StoryFn<{}> = (args) => ({
+ components: { VBtn, SelectField },
+ setup() {
+ const schema = object({
+ genre: string().required().label('Genre'),
+ gender: string().required().label('Gender'),
+ });
+
+ const { handleSubmit, resetForm, values } = useForm({
+ validationSchema: schema,
+ });
+
+ const onSubmit = handleSubmit((values) => {
+ alert(JSON.stringify(values));
+ });
+
+ const genders = ref([
+ {
+ text: 'Select Gender',
+ value: '',
+ disabled: true,
+ },
+ {
+ text: 'Male',
+ value: 'male',
+ },
+ {
+ text: 'Female',
+ value: 'female',
+ },
+ ]);
+
+ const genres = ref([
+ {
+ text: 'Select Genre',
+ value: '',
+ disabled: true,
+ },
+ {
+ text: 'Pop',
+ value: 'pop',
+ },
+ {
+ text: 'Rock',
+ value: 'rock',
+ },
+ ]);
+
+ return { onSubmit, resetForm, values, genders, genres };
+ },
+ template: `
+
+`,
+});
+
+export const DarkMode: StoryFn = (args) => ({
+ components: { Select },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+ `,
+});
diff --git a/packages/forms/src/form-select/Select.vue b/packages/ui/src/forms/src/form-select/Select.vue
similarity index 94%
rename from packages/forms/src/form-select/Select.vue
rename to packages/ui/src/forms/src/form-select/Select.vue
index bf2599f8c..6ff7b4b32 100644
--- a/packages/forms/src/form-select/Select.vue
+++ b/packages/ui/src/forms/src/form-select/Select.vue
@@ -1,148 +1,148 @@
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
- {{ hint }}
-
-
-
-
- {{ errorMessage }}
-
-
-
+
+
+
diff --git a/packages/forms/src/form-select/SelectField.vue b/packages/ui/src/forms/src/form-select/SelectField.vue
similarity index 100%
rename from packages/forms/src/form-select/SelectField.vue
rename to packages/ui/src/forms/src/form-select/SelectField.vue
diff --git a/packages/forms/src/form-select/VFormSelect.spec.ts b/packages/ui/src/forms/src/form-select/VFormSelect.spec.ts
similarity index 100%
rename from packages/forms/src/form-select/VFormSelect.spec.ts
rename to packages/ui/src/forms/src/form-select/VFormSelect.spec.ts
diff --git a/packages/forms/src/form-select/VFormSelect.stories.ts b/packages/ui/src/forms/src/form-select/VFormSelect.stories.ts
similarity index 84%
rename from packages/forms/src/form-select/VFormSelect.stories.ts
rename to packages/ui/src/forms/src/form-select/VFormSelect.stories.ts
index e46427ffa..7cf13c9b0 100644
--- a/packages/forms/src/form-select/VFormSelect.stories.ts
+++ b/packages/ui/src/forms/src/form-select/VFormSelect.stories.ts
@@ -1,461 +1,461 @@
-import type {StoryFn, Meta} from '@storybook/vue3';
-import {sizes} from '@morpheme/utils/sizes';
-import type {VFormSelectItem as VFormSelectProps} from './types';
-import VFormSelect from './VFormSelect.vue';
-import {useForm} from 'vee-validate';
-import {object, string} from 'yup';
-import {ref} from 'vue';
-import VBtn from '@morpheme/button';
-
-const items = [...Array(5)].map((item, index) => ({
- value: index,
- text: `Option ${index}`,
-}));
-
-export default {
- title: 'Forms/FormSelect',
- component: VFormSelect,
- argTypes: {
- size: {
- control: 'select',
- options: sizes,
- },
- },
- args: {
- items,
- modelValue: '1',
- value: '',
- size: '',
- itemText: 'text',
- itemValue: 'value',
- name: '',
- error: false,
- errorMessages: [],
- disabled: false,
- useForm: false,
- setupWithInitialValues: false,
- },
-} as Meta;
-
-const Template: StoryFn
+
+
+
+
+ {{ hint }}
+
+
+
+
+ {{ errorMessage }}
+
+
+
-
- `,
-});
+import type { StoryFn, Meta } from '@storybook/vue3';
+import { sizes } from '@morpheme/utils/sizes';
+import type { VFormSelectItem as VFormSelectProps } from './types';
+import VFormSelect from './VFormSelect.vue';
+import { useForm } from 'vee-validate';
+import { object, string } from 'yup';
+import { ref } from 'vue';
+import VBtn from '../../../button/src';
+
+const items = [...Array(5)].map((item, index) => ({
+ value: index,
+ text: `Option ${index}`,
+}));
+
+export default {
+ title: 'Forms/FormSelect',
+ component: VFormSelect,
+ argTypes: {
+ size: {
+ control: 'select',
+ options: sizes,
+ },
+ },
+ args: {
+ items,
+ modelValue: '1',
+ value: '',
+ size: '',
+ itemText: 'text',
+ itemValue: 'value',
+ name: '',
+ error: false,
+ errorMessages: [],
+ disabled: false,
+ useForm: false,
+ setupWithInitialValues: false,
+ },
+} as Meta;
+
+const Template: StoryFn
+
+ `,
+});
diff --git a/packages/forms/src/form-select/VFormSelect.vue b/packages/ui/src/forms/src/form-select/VFormSelect.vue
similarity index 95%
rename from packages/forms/src/form-select/VFormSelect.vue
rename to packages/ui/src/forms/src/form-select/VFormSelect.vue
index 47f970412..e8355cfb8 100644
--- a/packages/forms/src/form-select/VFormSelect.vue
+++ b/packages/ui/src/forms/src/form-select/VFormSelect.vue
@@ -1,150 +1,150 @@
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
- {{ errorMessage }}
-
-
+
+
+
diff --git a/packages/forms/src/form-select/index.ts b/packages/ui/src/forms/src/form-select/index.ts
similarity index 100%
rename from packages/forms/src/form-select/index.ts
rename to packages/ui/src/forms/src/form-select/index.ts
diff --git a/packages/forms/src/form-select/types.ts b/packages/ui/src/forms/src/form-select/types.ts
similarity index 100%
rename from packages/forms/src/form-select/types.ts
rename to packages/ui/src/forms/src/form-select/types.ts
diff --git a/packages/forms/src/forms.dark.scss b/packages/ui/src/forms/src/forms.dark.scss
similarity index 100%
rename from packages/forms/src/forms.dark.scss
rename to packages/ui/src/forms/src/forms.dark.scss
diff --git a/packages/forms/src/forms.scss b/packages/ui/src/forms/src/forms.scss
similarity index 100%
rename from packages/forms/src/forms.scss
rename to packages/ui/src/forms/src/forms.scss
diff --git a/packages/forms/src/index.ts b/packages/ui/src/forms/src/index.ts
similarity index 98%
rename from packages/forms/src/index.ts
rename to packages/ui/src/forms/src/index.ts
index 11006678f..c2c832aa6 100644
--- a/packages/forms/src/index.ts
+++ b/packages/ui/src/forms/src/index.ts
@@ -1,16 +1,16 @@
-export {default as VFileUpload} from './file-input/VFileUpload.vue';
-export {default as VFileUploadButtonTheme} from './file-input/VFileUploadButtonTheme.vue';
-export {default as VFileUploadImageTheme} from './file-input/VFileUploadImageTheme.vue';
-export {default as VFileUploadDropzoneTheme} from './file-input/VFileUploadDropzoneTheme.vue';
-export {default as VFileUploadDefaultTheme} from './file-input/VFileUploadDefaultTheme.vue';
-export {default as VFileUploadActions} from './file-input/VFileUploadActions.vue';
-export {default as VFormGroup} from './form-group/VFormGroup.vue';
-export {default as VErrorMessage} from './ErrorMessage.vue';
-export {default as FormField} from './FormField.vue';
-export * from './composables';
-export * from './form-select';
-export * from './file-input';
-export * from './input';
-export * from './textarea';
-export * from './radio';
-export * from './checkbox';
+export {default as VFileUpload} from './file-input/VFileUpload.vue';
+export {default as VFileUploadButtonTheme} from './file-input/VFileUploadButtonTheme.vue';
+export {default as VFileUploadImageTheme} from './file-input/VFileUploadImageTheme.vue';
+export {default as VFileUploadDropzoneTheme} from './file-input/VFileUploadDropzoneTheme.vue';
+export {default as VFileUploadDefaultTheme} from './file-input/VFileUploadDefaultTheme.vue';
+export {default as VFileUploadActions} from './file-input/VFileUploadActions.vue';
+export {default as VFormGroup} from './form-group/VFormGroup.vue';
+export {default as VErrorMessage} from './ErrorMessage.vue';
+export {default as FormField} from './FormField.vue';
+export * from './composables';
+export * from './form-select';
+export * from './file-input';
+export * from './input';
+export * from './textarea';
+export * from './radio';
+export * from './checkbox';
diff --git a/packages/forms/src/input/Input.stories.ts b/packages/ui/src/forms/src/input/Input.stories.ts
similarity index 90%
rename from packages/forms/src/input/Input.stories.ts
rename to packages/ui/src/forms/src/input/Input.stories.ts
index 9f4299ec4..19b70b40b 100644
--- a/packages/forms/src/input/Input.stories.ts
+++ b/packages/ui/src/forms/src/input/Input.stories.ts
@@ -1,689 +1,689 @@
-import VInput from './Input.vue';
-import type {Meta, Story} from '@storybook/vue3';
-import Icon from '@morpheme/icon';
-import {themeColors} from '@morpheme/utils';
-import VBtn from '@morpheme/button';
-import {useForm} from 'vee-validate';
-import {object, string} from 'yup';
-import {ref} from 'vue';
-import InputField from './InputField.vue'
-
-const sizes = ['sm', 'md', 'lg'] as const;
-
-export default {
- title: 'Experimental/Forms/Input',
- component: VInput,
- argTypes: {
- size: {
- control: 'select',
- options: sizes,
- },
- color: {
- control: 'select',
- options: themeColors,
- },
- },
- args: {
- placeholder: 'Type something...',
- },
-} as Meta;
-
-const Template: Story
+
+
+
+
+ {{ errorMessage }}
+
+ Model Value: {{ value }}
-`,
-});
-
-export const Colors: Story
-
-
-`,
-});
-Colors.parameters = {
- docs: {
- source: {
- code: `
-
-
-
-
-
-
-`,
-});
-Icons.parameters = {
- docs: {
- source: {
- code: `
-Custom Classes:
-Rounded
-
-
- `,
- },
- },
-};
-
-export const Slots: StoryCustom Classes:
-Outer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Text
-
-
-
-
-
- Text
-
-
-
-
-
- https://gits.id/user/
-
-
-
-
-
- @gits.id
-
-
-
-
-
- Search
-
-
-
-
-
- Search
-
-
-
-
-
- Browse
-
-
-
-
-
- Browse
-
-
-
- `,
-});
-Slots.parameters = {
- docs: {
- source: {
- code: `
-Inner
-Text
-Button
-Icon
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Text
-
-
-
-
-
- Text
-
-
-
-
-
- https://gits.id/user/
-
-
-
-
-
- @gits.id
-
-
-
-
-
- Search
-
-
-
-
-
- Search
-
-
-
-
-
- Browse
-
-
-
-
-
- Browse
-
-
-
- `,
- },
- },
-};
-
-export const Sizes: StoryText
-Button
-
-
-`,
-});
-Sizes.parameters = {
- docs: {
- source: {
- code: `
-
- `,
-});
+import VInput from './Input.vue';
+import type { Meta, Story } from '@storybook/vue3';
+import Icon from '../../../icon/src';
+import { themeColors } from '@morpheme/utils';
+import VBtn from '../../../button/src';
+import { useForm } from 'vee-validate';
+import { object, string } from 'yup';
+import { ref } from 'vue';
+import InputField from './InputField.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const;
+
+export default {
+ title: 'Experimental/Forms/Input',
+ component: VInput,
+ argTypes: {
+ size: {
+ control: 'select',
+ options: sizes,
+ },
+ color: {
+ control: 'select',
+ options: themeColors,
+ },
+ },
+ args: {
+ placeholder: 'Type something...',
+ },
+} as Meta;
+
+const Template: StoryModel Value: {{ value }}
+`,
+});
+
+export const Colors: Story
+
+
+`,
+});
+Colors.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+
+
+
+
+`,
+});
+Icons.parameters = {
+ docs: {
+ source: {
+ code: `
+Custom Classes:
+Rounded
+
+
+ `,
+ },
+ },
+};
+
+export const Slots: StoryCustom Classes:
+Outer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+ Text
+
+
+
+
+
+ https://gits.id/user/
+
+
+
+
+
+ @gits.id
+
+
+
+
+
+ Search
+
+
+
+
+
+ Search
+
+
+
+
+
+ Browse
+
+
+
+
+
+ Browse
+
+
+
+ `,
+});
+Slots.parameters = {
+ docs: {
+ source: {
+ code: `
+Inner
+Text
+Button
+Icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+ Text
+
+
+
+
+
+ https://gits.id/user/
+
+
+
+
+
+ @gits.id
+
+
+
+
+
+ Search
+
+
+
+
+
+ Search
+
+
+
+
+
+ Browse
+
+
+
+
+
+ Browse
+
+
+
+ `,
+ },
+ },
+};
+
+export const Sizes: StoryText
+Button
+
+
+`,
+});
+Sizes.parameters = {
+ docs: {
+ source: {
+ code: `
+
+ `,
+});
diff --git a/packages/forms/src/input/Input.vue b/packages/ui/src/forms/src/input/Input.vue
similarity index 94%
rename from packages/forms/src/input/Input.vue
rename to packages/ui/src/forms/src/input/Input.vue
index 2b93195c2..cf7b0b42f 100644
--- a/packages/forms/src/input/Input.vue
+++ b/packages/ui/src/forms/src/input/Input.vue
@@ -1,320 +1,320 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ hint }}
-
-
-
-
- {{ errorMessage }}
-
-
-
+
+
+
+
+
diff --git a/packages/forms/src/input/InputField.vue b/packages/ui/src/forms/src/input/InputField.vue
similarity index 100%
rename from packages/forms/src/input/InputField.vue
rename to packages/ui/src/forms/src/input/InputField.vue
diff --git a/packages/forms/src/input/SelectOptions.vue b/packages/ui/src/forms/src/input/SelectOptions.vue
similarity index 100%
rename from packages/forms/src/input/SelectOptions.vue
rename to packages/ui/src/forms/src/input/SelectOptions.vue
diff --git a/packages/forms/src/input/VInput.spec.ts b/packages/ui/src/forms/src/input/VInput.spec.ts
similarity index 100%
rename from packages/forms/src/input/VInput.spec.ts
rename to packages/ui/src/forms/src/input/VInput.spec.ts
diff --git a/packages/forms/src/input/VInput.stories.ts b/packages/ui/src/forms/src/input/VInput.stories.ts
similarity index 90%
rename from packages/forms/src/input/VInput.stories.ts
rename to packages/ui/src/forms/src/input/VInput.stories.ts
index 34925688b..cb38242f0 100644
--- a/packages/forms/src/input/VInput.stories.ts
+++ b/packages/ui/src/forms/src/input/VInput.stories.ts
@@ -1,788 +1,788 @@
-import VInput from './VInput.vue';
-import type {Meta, Story} from '@storybook/vue3';
-import Icon from '@morpheme/icon';
-import {themeColors} from '@morpheme/utils';
-import VBtn from '@morpheme/button';
-import {useForm} from 'vee-validate';
-import {object, string} from 'yup';
-import FieldArrayStory from './stories/FieldArray.story.vue';
-import FieldArrayOfObject from './stories/FieldArrayOfObject.story.vue';
-import FieldArrayNestedComponent from './stories/FieldArrayNested.story.vue';
-import {ref} from 'vue';
-import FormsPlaygroundComponent from './stories/FormsPlayground.vue';
-
-const sizes = ['sm', 'md', 'lg'] as const;
-
-export default {
- title: 'Forms/Input',
- component: VInput,
- argTypes: {
- size: {
- control: 'select',
- options: sizes,
- },
- color: {
- control: 'select',
- options: themeColors,
- },
- validationMode: {
- control: 'select',
- options: ['aggressive', 'eager'],
- },
- },
- args: {
- placeholder: 'Type something...',
- useForm: false,
- },
-} as Meta;
-
-const Template: Story
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ hint }}
+
+
+
+
+ {{ errorMessage }}
+
+
+
-
-
-`,
-});
-Colors.parameters = {
- docs: {
- source: {
- code: `
-
-
-
-
-
-
-`,
-});
-Icons.parameters = {
- docs: {
- source: {
- code: `
-Custom Classes:
-Rounded
-
-
- `,
- },
- },
-};
-
-export const Slots: StoryCustom Classes:
-Outer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Text
-
-
-
-
-
- Text
-
-
-
-
-
- https://gits.id/user/
-
-
-
-
-
- @gits.id
-
-
-
-
-
- Search
-
-
-
-
-
- Search
-
-
-
-
-
- Browse
-
-
-
-
-
- Browse
-
-
-
- `,
-});
-Slots.parameters = {
- docs: {
- source: {
- code: `
-Inner
-Text
-Button
-Icon
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Text
-
-
-
-
-
- Text
-
-
-
-
-
- https://gits.id/user/
-
-
-
-
-
- @gits.id
-
-
-
-
-
- Search
-
-
-
-
-
- Search
-
-
-
-
-
- Browse
-
-
-
-
-
- Browse
-
-
-
- `,
- },
- },
-};
-
-export const Sizes: StoryText
-Button
-
-
-`,
-});
-Sizes.parameters = {
- docs: {
- source: {
- code: `
-
- `,
-});
+import VInput from './VInput.vue';
+import type { Meta, Story } from '@storybook/vue3';
+import Icon from '../../../icon/src';
+import { themeColors } from '@morpheme/utils';
+import VBtn from '../../../button/src';
+import { useForm } from 'vee-validate';
+import { object, string } from 'yup';
+import FieldArrayStory from './stories/FieldArray.story.vue';
+import FieldArrayOfObject from './stories/FieldArrayOfObject.story.vue';
+import FieldArrayNestedComponent from './stories/FieldArrayNested.story.vue';
+import { ref } from 'vue';
+import FormsPlaygroundComponent from './stories/FormsPlayground.vue';
+
+const sizes = ['sm', 'md', 'lg'] as const;
+
+export default {
+ title: 'Forms/Input',
+ component: VInput,
+ argTypes: {
+ size: {
+ control: 'select',
+ options: sizes,
+ },
+ color: {
+ control: 'select',
+ options: themeColors,
+ },
+ validationMode: {
+ control: 'select',
+ options: ['aggressive', 'eager'],
+ },
+ },
+ args: {
+ placeholder: 'Type something...',
+ useForm: false,
+ },
+} as Meta;
+
+const Template: Story
+
+
+`,
+});
+Colors.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+
+
+
+
+`,
+});
+Icons.parameters = {
+ docs: {
+ source: {
+ code: `
+Custom Classes:
+Rounded
+
+
+ `,
+ },
+ },
+};
+
+export const Slots: StoryCustom Classes:
+Outer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+ Text
+
+
+
+
+
+ https://gits.id/user/
+
+
+
+
+
+ @gits.id
+
+
+
+
+
+ Search
+
+
+
+
+
+ Search
+
+
+
+
+
+ Browse
+
+
+
+
+
+ Browse
+
+
+
+ `,
+});
+Slots.parameters = {
+ docs: {
+ source: {
+ code: `
+Inner
+Text
+Button
+Icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text
+
+
+
+
+
+ Text
+
+
+
+
+
+ https://gits.id/user/
+
+
+
+
+
+ @gits.id
+
+
+
+
+
+ Search
+
+
+
+
+
+ Search
+
+
+
+
+
+ Browse
+
+
+
+
+
+ Browse
+
+
+
+ `,
+ },
+ },
+};
+
+export const Sizes: StoryText
+Button
+
+
+`,
+});
+Sizes.parameters = {
+ docs: {
+ source: {
+ code: `
+
+ `,
+});
diff --git a/packages/forms/src/input/VInput.vue b/packages/ui/src/forms/src/input/VInput.vue
similarity index 94%
rename from packages/forms/src/input/VInput.vue
rename to packages/ui/src/forms/src/input/VInput.vue
index a9b573b36..a76beb3d2 100644
--- a/packages/forms/src/input/VInput.vue
+++ b/packages/ui/src/forms/src/input/VInput.vue
@@ -1,328 +1,328 @@
-
-
-
-
-
-
-
-
- {{ errorMessage }}
-
-
-
+
+
+
+
- {{ uncontrolledValue }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{ errorMessage }}
+
+
+
diff --git a/packages/forms/src/input/VInputGroup.vue b/packages/ui/src/forms/src/input/VInputGroup.vue
similarity index 98%
rename from packages/forms/src/input/VInputGroup.vue
rename to packages/ui/src/forms/src/input/VInputGroup.vue
index bc8682a09..38a3735ff 100644
--- a/packages/forms/src/input/VInputGroup.vue
+++ b/packages/ui/src/forms/src/input/VInputGroup.vue
@@ -3,7 +3,7 @@
import {ref, toRefs, computed, watch} from 'vue';
import VInput from './VInput.vue';
import {ErrorMessage} from 'vee-validate';
-import Icon from '@morpheme/icon';
+import Icon from '../../../icon/src';
const props = defineProps({
modelValue: {
diff --git a/packages/forms/src/input/VInputRange.spec.ts b/packages/ui/src/forms/src/input/VInputRange.spec.ts
similarity index 100%
rename from packages/forms/src/input/VInputRange.spec.ts
rename to packages/ui/src/forms/src/input/VInputRange.spec.ts
diff --git a/packages/forms/src/input/VInputRange.stories.ts b/packages/ui/src/forms/src/input/VInputRange.stories.ts
similarity index 77%
rename from packages/forms/src/input/VInputRange.stories.ts
rename to packages/ui/src/forms/src/input/VInputRange.stories.ts
index 7c1066fda..df3f1f46f 100644
--- a/packages/forms/src/input/VInputRange.stories.ts
+++ b/packages/ui/src/forms/src/input/VInputRange.stories.ts
@@ -1,208 +1,208 @@
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {useForm} from 'vee-validate';
-import {ref} from 'vue';
-import {object} from 'yup';
-import VInputRange from './VInputRange.vue';
-import VBtn from '@morpheme/button';
-
-export default {
- title: 'Forms/InputRange',
- component: VInputRange,
- argTypes: {},
- args: {
- min: 0,
- max: 100,
- },
-} as Meta;
-
-export const Default: StoryFn = (args) => ({
- components: {VInputRange},
- setup() {
- const val = ref('');
- return {args, val};
- },
- template: '
+ {{ uncontrolledValue }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ errorMessage }}
-
-
+
+
+
+
+
diff --git a/packages/forms/src/input/index.ts b/packages/ui/src/forms/src/input/index.ts
similarity index 100%
rename from packages/forms/src/input/index.ts
rename to packages/ui/src/forms/src/input/index.ts
diff --git a/packages/forms/src/input/stories/FieldArray.story.vue b/packages/ui/src/forms/src/input/stories/FieldArray.story.vue
similarity index 95%
rename from packages/forms/src/input/stories/FieldArray.story.vue
rename to packages/ui/src/forms/src/input/stories/FieldArray.story.vue
index 1dec6098b..819ef053d 100644
--- a/packages/forms/src/input/stories/FieldArray.story.vue
+++ b/packages/ui/src/forms/src/input/stories/FieldArray.story.vue
@@ -1,7 +1,7 @@
diff --git a/packages/forms/src/input/types.ts b/packages/ui/src/forms/src/input/types.ts
similarity index 100%
rename from packages/forms/src/input/types.ts
rename to packages/ui/src/forms/src/input/types.ts
diff --git a/packages/forms/src/input/useRange.ts b/packages/ui/src/forms/src/input/useRange.ts
similarity index 100%
rename from packages/forms/src/input/useRange.ts
rename to packages/ui/src/forms/src/input/useRange.ts
diff --git a/packages/forms/src/radio/Radio.stories.ts b/packages/ui/src/forms/src/radio/Radio.stories.ts
similarity index 79%
rename from packages/forms/src/radio/Radio.stories.ts
rename to packages/ui/src/forms/src/radio/Radio.stories.ts
index 5c1e659e1..54d64e3bd 100644
--- a/packages/forms/src/radio/Radio.stories.ts
+++ b/packages/ui/src/forms/src/radio/Radio.stories.ts
@@ -1,133 +1,133 @@
-import VRadio from './Radio.vue';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {useForm, Field} from 'vee-validate';
-import {object, string} from 'yup';
-import VBtn from '@morpheme/button';
-import {ref} from 'vue';
-
-export default {
- title: 'Experimental/Forms/Radio',
- component: VRadio,
-} as Meta;
-
-export const Default: StoryFn = (args) => ({
- components: {VRadio},
- setup() {
- const value = ref('1');
- return {args, value};
- },
- template: `
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ errorMessage }}
+
+ Model value: {{ value }}
- `,
-});
-
-export const Hint: StoryFn = (args) => ({
- components: {VRadio},
- setup() {
- const value = ref('1');
- return {args, value};
- },
- template: `
-
-
- `,
-});
+import VRadio from './Radio.vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { useForm, Field } from 'vee-validate';
+import { object, string } from 'yup';
+import VBtn from '../../../button/src';
+import { ref } from 'vue';
+
+export default {
+ title: 'Experimental/Forms/Radio',
+ component: VRadio,
+} as Meta;
+
+export const Default: StoryFn = (args) => ({
+ components: { VRadio },
+ setup() {
+ const value = ref('1');
+ return { args, value };
+ },
+ template: `
+ Model value: {{ value }}
+ `,
+});
+
+export const Hint: StoryFn = (args) => ({
+ components: { VRadio },
+ setup() {
+ const value = ref('1');
+ return { args, value };
+ },
+ template: `
+
+
+ `,
+});
diff --git a/packages/forms/src/radio/Radio.vue b/packages/ui/src/forms/src/radio/Radio.vue
similarity index 94%
rename from packages/forms/src/radio/Radio.vue
rename to packages/ui/src/forms/src/radio/Radio.vue
index 4144e0852..08156c45d 100644
--- a/packages/forms/src/radio/Radio.vue
+++ b/packages/ui/src/forms/src/radio/Radio.vue
@@ -1,132 +1,132 @@
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
- {{ errorMessage }}
-
-
-
+
+
diff --git a/packages/forms/src/radio/VRadio.dark.scss b/packages/ui/src/forms/src/radio/VRadio.dark.scss
similarity index 100%
rename from packages/forms/src/radio/VRadio.dark.scss
rename to packages/ui/src/forms/src/radio/VRadio.dark.scss
diff --git a/packages/forms/src/radio/VRadio.scss b/packages/ui/src/forms/src/radio/VRadio.scss
similarity index 100%
rename from packages/forms/src/radio/VRadio.scss
rename to packages/ui/src/forms/src/radio/VRadio.scss
diff --git a/packages/forms/src/radio/VRadio.spec.ts b/packages/ui/src/forms/src/radio/VRadio.spec.ts
similarity index 100%
rename from packages/forms/src/radio/VRadio.spec.ts
rename to packages/ui/src/forms/src/radio/VRadio.spec.ts
diff --git a/packages/forms/src/radio/VRadio.stories.ts b/packages/ui/src/forms/src/radio/VRadio.stories.ts
similarity index 81%
rename from packages/forms/src/radio/VRadio.stories.ts
rename to packages/ui/src/forms/src/radio/VRadio.stories.ts
index 7e6de4abc..69e365f8f 100644
--- a/packages/forms/src/radio/VRadio.stories.ts
+++ b/packages/ui/src/forms/src/radio/VRadio.stories.ts
@@ -1,231 +1,231 @@
-import VRadio from './VRadio.vue';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {useForm} from 'vee-validate';
-import {object, string} from 'yup';
-import VBtn from '@morpheme/button';
-import {ref} from 'vue';
-
-export default {
- title: 'Forms/Radio',
- component: VRadio,
- args: {
- useForm: true,
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VRadio},
- setup() {
- const value = ref('1');
- return {args, value};
- },
- template: `
-
+
+
+
+
+
+
+ {{ errorMessage }}
+
+
+
-
- `,
-});
+import VRadio from './VRadio.vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { useForm } from 'vee-validate';
+import { object, string } from 'yup';
+import VBtn from '../../../button/src';
+import { ref } from 'vue';
+
+export default {
+ title: 'Forms/Radio',
+ component: VRadio,
+ args: {
+ useForm: true,
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { VRadio },
+ setup() {
+ const value = ref('1');
+ return { args, value };
+ },
+ template: `
+
+
+ `,
+});
diff --git a/packages/forms/src/radio/VRadio.vue b/packages/ui/src/forms/src/radio/VRadio.vue
similarity index 94%
rename from packages/forms/src/radio/VRadio.vue
rename to packages/ui/src/forms/src/radio/VRadio.vue
index 620601216..b039530b4 100644
--- a/packages/forms/src/radio/VRadio.vue
+++ b/packages/ui/src/forms/src/radio/VRadio.vue
@@ -1,140 +1,140 @@
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
- {{ errorMessage }}
-
-
+
+
diff --git a/packages/forms/src/radio/VRadioGroup.dark.scss b/packages/ui/src/forms/src/radio/VRadioGroup.dark.scss
similarity index 100%
rename from packages/forms/src/radio/VRadioGroup.dark.scss
rename to packages/ui/src/forms/src/radio/VRadioGroup.dark.scss
diff --git a/packages/forms/src/radio/VRadioGroup.scss b/packages/ui/src/forms/src/radio/VRadioGroup.scss
similarity index 100%
rename from packages/forms/src/radio/VRadioGroup.scss
rename to packages/ui/src/forms/src/radio/VRadioGroup.scss
diff --git a/packages/forms/src/radio/VRadioGroup.spec.ts b/packages/ui/src/forms/src/radio/VRadioGroup.spec.ts
similarity index 100%
rename from packages/forms/src/radio/VRadioGroup.spec.ts
rename to packages/ui/src/forms/src/radio/VRadioGroup.spec.ts
diff --git a/packages/forms/src/radio/VRadioGroup.stories.ts b/packages/ui/src/forms/src/radio/VRadioGroup.stories.ts
similarity index 83%
rename from packages/forms/src/radio/VRadioGroup.stories.ts
rename to packages/ui/src/forms/src/radio/VRadioGroup.stories.ts
index b1afeb463..9c2c216da 100644
--- a/packages/forms/src/radio/VRadioGroup.stories.ts
+++ b/packages/ui/src/forms/src/radio/VRadioGroup.stories.ts
@@ -1,361 +1,361 @@
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {useForm} from 'vee-validate';
-import {object, number, string} from 'yup';
-import VRadioGroup from './VRadioGroup.vue';
-import VBtn from '@morpheme/button';
-import {ref} from 'vue';
-
-const items = [...Array(5)].map((v, k) => ({
- text: `Item ${k + 1}`,
- value: k + 1,
-}));
-
-export default {
- title: 'Forms/RadioGroup',
- component: VRadioGroup,
- argTypes: {},
- args: {
- modelValue: '',
- value: '',
- items,
- itemText: 'text',
- itemValue: 'value',
- disabled: false,
- readonly: false,
- error: false,
- errorMessages: [],
- name: '',
- label: 'Select',
- inline: false,
- useForm: true,
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VRadioGroup},
- setup() {
- return {args};
- },
- template: `
+
+
+
+
+
+ {{ errorMessage }}
+
+
-
- `,
-});
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { useForm } from 'vee-validate';
+import { object, number, string } from 'yup';
+import VRadioGroup from './VRadioGroup.vue';
+import VBtn from '../../../button/src';
+import { ref } from 'vue';
+
+const items = [...Array(5)].map((v, k) => ({
+ text: `Item ${k + 1}`,
+ value: k + 1,
+}));
+
+export default {
+ title: 'Forms/RadioGroup',
+ component: VRadioGroup,
+ argTypes: {},
+ args: {
+ modelValue: '',
+ value: '',
+ items,
+ itemText: 'text',
+ itemValue: 'value',
+ disabled: false,
+ readonly: false,
+ error: false,
+ errorMessages: [],
+ name: '',
+ label: 'Select',
+ inline: false,
+ useForm: true,
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { VRadioGroup },
+ setup() {
+ return { args };
+ },
+ template: `
+
+ `,
+});
diff --git a/packages/forms/src/radio/VRadioGroup.vue b/packages/ui/src/forms/src/radio/VRadioGroup.vue
similarity index 95%
rename from packages/forms/src/radio/VRadioGroup.vue
rename to packages/ui/src/forms/src/radio/VRadioGroup.vue
index 104061c4a..6160b01ad 100644
--- a/packages/forms/src/radio/VRadioGroup.vue
+++ b/packages/ui/src/forms/src/radio/VRadioGroup.vue
@@ -1,236 +1,236 @@
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
- {{ errorMessage }}
-
-
+
+
+
diff --git a/packages/forms/src/radio/index.ts b/packages/ui/src/forms/src/radio/index.ts
similarity index 100%
rename from packages/forms/src/radio/index.ts
rename to packages/ui/src/forms/src/radio/index.ts
diff --git a/packages/forms/src/stories/Forms.stories.ts b/packages/ui/src/forms/src/stories/Forms.stories.ts
similarity index 100%
rename from packages/forms/src/stories/Forms.stories.ts
rename to packages/ui/src/forms/src/stories/Forms.stories.ts
diff --git a/packages/forms/src/stories/Forms.story.vue b/packages/ui/src/forms/src/stories/Forms.story.vue
similarity index 95%
rename from packages/forms/src/stories/Forms.story.vue
rename to packages/ui/src/forms/src/stories/Forms.story.vue
index afe12c086..d609c0e36 100644
--- a/packages/forms/src/stories/Forms.story.vue
+++ b/packages/ui/src/forms/src/stories/Forms.story.vue
@@ -1,8 +1,8 @@
-
-
-
+
+
+
+
+ {{ errorMessage }}
+
+
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
diff --git a/packages/forms/src/textarea/TextareaInput.stories.ts b/packages/ui/src/forms/src/textarea/TextareaInput.stories.ts
similarity index 81%
rename from packages/forms/src/textarea/TextareaInput.stories.ts
rename to packages/ui/src/forms/src/textarea/TextareaInput.stories.ts
index f95462e75..88163b488 100644
--- a/packages/forms/src/textarea/TextareaInput.stories.ts
+++ b/packages/ui/src/forms/src/textarea/TextareaInput.stories.ts
@@ -1,189 +1,189 @@
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {sizes} from '@morpheme/utils';
-import VTextarea from './TextareaInput.vue';
-import VBtn from '@morpheme/button';
-import {object, string} from 'yup';
-import {useForm} from 'vee-validate';
-import {ref} from 'vue';
-import TextareaInputField from './TextareaInputField.vue';
-
-export default {
- title: 'Experimental/Forms/Textarea',
- component: VTextarea,
- argTypes: {
- size: {
- control: 'select',
- options: sizes,
- },
- },
- args: {
- rows: 5,
- placeholder: 'Type something...',
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VTextarea},
- setup() {
- return {args};
- },
- template: `
+
+
+
+
+ Value: {{ value }}
- `,
-});
-
-export const Label = Template.bind({});
-Label.args = {label: 'My Label'};
-Label.parameters = {
- docs: {
- source: {
- code: '{{ {values, errors} }}
-`,
-});
-
-export const DarkMode: StoryFn = (args) => ({
- components: {VTextarea},
- setup() {
- return {args};
- },
- template: `
-
-
- `,
-});
-
-export const HideError = Validation.bind({});
-HideError.args = {
- hideError: true,
-};
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { sizes } from '@morpheme/utils';
+import VTextarea from './TextareaInput.vue';
+import VBtn from '../../../button/src';
+import { object, string } from 'yup';
+import { useForm } from 'vee-validate';
+import { ref } from 'vue';
+import TextareaInputField from './TextareaInputField.vue';
+
+export default {
+ title: 'Experimental/Forms/Textarea',
+ component: VTextarea,
+ argTypes: {
+ size: {
+ control: 'select',
+ options: sizes,
+ },
+ },
+ args: {
+ rows: 5,
+ placeholder: 'Type something...',
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { VTextarea },
+ setup() {
+ return { args };
+ },
+ template: `Value: {{ value }}
+ `,
+});
+
+export const Label = Template.bind({});
+Label.args = { label: 'My Label' };
+Label.parameters = {
+ docs: {
+ source: {
+ code: '{{ {values, errors} }}
+`,
+});
+
+export const DarkMode: StoryFn = (args) => ({
+ components: { VTextarea },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ `,
+});
+
+export const HideError = Validation.bind({});
+HideError.args = {
+ hideError: true,
+};
diff --git a/packages/forms/src/textarea/TextareaInput.vue b/packages/ui/src/forms/src/textarea/TextareaInput.vue
similarity index 94%
rename from packages/forms/src/textarea/TextareaInput.vue
rename to packages/ui/src/forms/src/textarea/TextareaInput.vue
index d71f022bb..2b3ac8952 100644
--- a/packages/forms/src/textarea/TextareaInput.vue
+++ b/packages/ui/src/forms/src/textarea/TextareaInput.vue
@@ -1,151 +1,151 @@
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
- {{ errorMessage }}
-
-
-
+
+
+
diff --git a/packages/forms/src/textarea/TextareaInputField.vue b/packages/ui/src/forms/src/textarea/TextareaInputField.vue
similarity index 100%
rename from packages/forms/src/textarea/TextareaInputField.vue
rename to packages/ui/src/forms/src/textarea/TextareaInputField.vue
diff --git a/packages/forms/src/textarea/index.ts b/packages/ui/src/forms/src/textarea/index.ts
similarity index 100%
rename from packages/forms/src/textarea/index.ts
rename to packages/ui/src/forms/src/textarea/index.ts
diff --git a/packages/logo/src/vue.d.ts b/packages/ui/src/forms/src/vue.d.ts
similarity index 100%
rename from packages/logo/src/vue.d.ts
rename to packages/ui/src/forms/src/vue.d.ts
diff --git a/packages/forms/tailwind.config.js b/packages/ui/src/forms/tailwind.config.js
similarity index 96%
rename from packages/forms/tailwind.config.js
rename to packages/ui/src/forms/tailwind.config.js
index 074123dcb..41bc586b8 100644
--- a/packages/forms/tailwind.config.js
+++ b/packages/ui/src/forms/tailwind.config.js
@@ -1,5 +1,5 @@
-module.exports = {
- darkMode: 'class',
- content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
- presets: [require('@morpheme/tailwind-config/preset')],
-};
+module.exports = {
+ darkMode: 'class',
+ content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
+ presets: [require('@morpheme/tailwind-config/preset')],
+};
diff --git a/packages/forms/tsconfig.json b/packages/ui/src/forms/tsconfig.json
similarity index 100%
rename from packages/forms/tsconfig.json
rename to packages/ui/src/forms/tsconfig.json
diff --git a/packages/forms/vite.config.ts b/packages/ui/src/forms/vite.config.ts
similarity index 100%
rename from packages/forms/vite.config.ts
rename to packages/ui/src/forms/vite.config.ts
diff --git a/stories/foundation/colors/Colors.stories.ts b/packages/ui/src/foundation/colors/Colors.stories.ts
similarity index 100%
rename from stories/foundation/colors/Colors.stories.ts
rename to packages/ui/src/foundation/colors/Colors.stories.ts
diff --git a/stories/foundation/colors/Colors.vue b/packages/ui/src/foundation/colors/Colors.vue
similarity index 96%
rename from stories/foundation/colors/Colors.vue
rename to packages/ui/src/foundation/colors/Colors.vue
index 04ce85bbb..64d9b8904 100644
--- a/stories/foundation/colors/Colors.vue
+++ b/packages/ui/src/foundation/colors/Colors.vue
@@ -1,67 +1,67 @@
-
-
-
-
+
+
+
+
+
+ {{ errorMessage }}
+
+
+ Colors
-Brand Colors
-
-
-
-
-
- - {{ color.replace('bg-', '').replace('-500', '') }} - - {{ colors[color.replace('bg-', '').replace('-500', '')][500] }} - -
-Tailwind Colors
-
-
-
-
+
+
+
+
-
-
- - {{ name }} -
-
-
-
-
-
-
- {{ shade }} {{ c }}
-
- Colors
+Brand Colors
+
+
+
+
+
+ + {{ color.replace('bg-', '').replace('-500', '') }} + + {{ colors[color.replace('bg-', '').replace('-500', '')][500] }} + +
+Tailwind Colors
+
+
+
+
diff --git a/stories/foundation/elevation/Elevation.stories.ts b/packages/ui/src/foundation/elevation/Elevation.stories.ts
similarity index 100%
rename from stories/foundation/elevation/Elevation.stories.ts
rename to packages/ui/src/foundation/elevation/Elevation.stories.ts
diff --git a/stories/foundation/elevation/Elevation.vue b/packages/ui/src/foundation/elevation/Elevation.vue
similarity index 86%
rename from stories/foundation/elevation/Elevation.vue
rename to packages/ui/src/foundation/elevation/Elevation.vue
index d13c83b63..c5be6e5c5 100644
--- a/stories/foundation/elevation/Elevation.vue
+++ b/packages/ui/src/foundation/elevation/Elevation.vue
@@ -1,17 +1,17 @@
-
-
-
-
+
+
+ + {{ name }} +
+
+
+
+
+
+
+ {{ shade }} {{ c }}
+
+ Elevation
-
-
-
-
+
+
+
+
-
-
-
- {{ name === 'DEFAULT' ? 'shadow' : `shadow-${name}` }}
-
- {{ shadow }}
- Elevation
+
+
+
+
diff --git a/stories/foundation/font/Font.stories.ts b/packages/ui/src/foundation/font/Font.stories.ts
similarity index 100%
rename from stories/foundation/font/Font.stories.ts
rename to packages/ui/src/foundation/font/Font.stories.ts
diff --git a/stories/foundation/font/Font.vue b/packages/ui/src/foundation/font/Font.vue
similarity index 96%
rename from stories/foundation/font/Font.vue
rename to packages/ui/src/foundation/font/Font.vue
index 06a18ba46..8ea1e5d74 100644
--- a/stories/foundation/font/Font.vue
+++ b/packages/ui/src/foundation/font/Font.vue
@@ -1,25 +1,25 @@
-
-
-
-
+
+
+
+ {{ (name as any) === 'DEFAULT' ? 'shadow' : `shadow-${name}` }}
+
+ {{ shadow }}
+ Font Family
-
-
-
+
+
+
+
-
-
-
-
- {{ name }}
-
-
- {{ font }}
-
- Lorem ipsum dolor sit amet consectetur, adipisicing elit -
-Font Family
+
+
+
diff --git a/stories/foundation/rounded/Rounded.stories.ts b/packages/ui/src/foundation/rounded/Rounded.stories.ts
similarity index 100%
rename from stories/foundation/rounded/Rounded.stories.ts
rename to packages/ui/src/foundation/rounded/Rounded.stories.ts
diff --git a/stories/foundation/rounded/Rounded.vue b/packages/ui/src/foundation/rounded/Rounded.vue
similarity index 86%
rename from stories/foundation/rounded/Rounded.vue
rename to packages/ui/src/foundation/rounded/Rounded.vue
index 9bfd480f3..e3a24e849 100644
--- a/stories/foundation/rounded/Rounded.vue
+++ b/packages/ui/src/foundation/rounded/Rounded.vue
@@ -1,21 +1,21 @@
-
-
-
-
+
+
+
+
+ {{ name }}
+
+
+ {{ font }}
+
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit +
+Rounded
-
-
-
+
+
+
+
-
-
- {{ name === 'DEFAULT' ? 'rounded' : `rounded-${name}` }}
-
- {{ rounded }} ({{ remToPx(rounded) }})
- Rounded
+
+
+
diff --git a/stories/foundation/typography/Typography.stories.ts b/packages/ui/src/foundation/typography/Typography.stories.ts
similarity index 100%
rename from stories/foundation/typography/Typography.stories.ts
rename to packages/ui/src/foundation/typography/Typography.stories.ts
diff --git a/stories/foundation/typography/Typography.vue b/packages/ui/src/foundation/typography/Typography.vue
similarity index 94%
rename from stories/foundation/typography/Typography.vue
rename to packages/ui/src/foundation/typography/Typography.vue
index 17a37ca76..609e1b737 100644
--- a/stories/foundation/typography/Typography.vue
+++ b/packages/ui/src/foundation/typography/Typography.vue
@@ -1,38 +1,37 @@
-
-
-
-
+
+
+ {{ (name as any) === 'DEFAULT' ? 'rounded' : `rounded-${name}` }}
+
+ {{ rounded }} ({{ remToPx(rounded) }})
+ Typography
-Font Size
-
-
-
-
-
-
- {{ `text-${name}` }}
-
- -
-
- Font size: {{ size }} -
- Lorem ipsum dolor sit amet consectetur, adipisicing elit -
-Font Weight
-
-
-
+
+
+
+
-
-
-
- {{ `text-${name}` }}
-
- -
-
- Font weight: {{ weight }} -
- Lorem ipsum dolor sit amet consectetur, adipisicing elit -
-Typography
+Font Size
+
+
+
+
+
+
+ {{ `text-${name}` }}
+
+ -
+
- Font size: {{ size }} +
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit +
+Font Weight
+
+
+
diff --git a/stories/foundation/utils.ts b/packages/ui/src/foundation/utils.ts
similarity index 100%
rename from stories/foundation/utils.ts
rename to packages/ui/src/foundation/utils.ts
diff --git a/packages/icon/CHANGELOG.md b/packages/ui/src/icon/CHANGELOG.md
similarity index 100%
rename from packages/icon/CHANGELOG.md
rename to packages/ui/src/icon/CHANGELOG.md
diff --git a/packages/icon/README.md b/packages/ui/src/icon/README.md
similarity index 100%
rename from packages/icon/README.md
rename to packages/ui/src/icon/README.md
diff --git a/packages/icon/package.json b/packages/ui/src/icon/package.json
similarity index 100%
rename from packages/icon/package.json
rename to packages/ui/src/icon/package.json
diff --git a/packages/icon/postcss.config.js b/packages/ui/src/icon/postcss.config.js
similarity index 100%
rename from packages/icon/postcss.config.js
rename to packages/ui/src/icon/postcss.config.js
diff --git a/packages/icon/src/Icon.dark.scss b/packages/ui/src/icon/src/Icon.dark.scss
similarity index 100%
rename from packages/icon/src/Icon.dark.scss
rename to packages/ui/src/icon/src/Icon.dark.scss
diff --git a/packages/icon/src/Icon.scss b/packages/ui/src/icon/src/Icon.scss
similarity index 100%
rename from packages/icon/src/Icon.scss
rename to packages/ui/src/icon/src/Icon.scss
diff --git a/packages/icon/src/Icon.spec.ts b/packages/ui/src/icon/src/Icon.spec.ts
similarity index 100%
rename from packages/icon/src/Icon.spec.ts
rename to packages/ui/src/icon/src/Icon.spec.ts
diff --git a/packages/icon/src/Icon.stories.ts b/packages/ui/src/icon/src/Icon.stories.ts
similarity index 96%
rename from packages/icon/src/Icon.stories.ts
rename to packages/ui/src/icon/src/Icon.stories.ts
index f111df60e..d928029a7 100644
--- a/packages/icon/src/Icon.stories.ts
+++ b/packages/ui/src/icon/src/Icon.stories.ts
@@ -1,126 +1,126 @@
-import type {StoryFn} from '@storybook/vue3';
-import Icon from './Icon.vue';
-
-export default {
- title: 'Components/Icon',
- component: Icon,
- argTypes: {},
- args: {
- name: 'ic:round-home',
- },
-};
-
-export const Default: StoryFn<{}> = (args) => ({
- setup() {
- return {args};
- },
- components: {Icon},
- template: `
+
+
+
+ {{ `text-${name}` }}
+
+ -
+
- Font weight: {{ weight }} +
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit +
+
-
- `,
-});
-
-export const MorphemeIcons: StoryFn = (args) => ({
- components: {Icon},
- setup() {
- return {args};
- },
- template: `
- Default Collection
-Morpheme Icons
-Non exist
-
- By default morpheme icons are cached and stored in local storage, but you can disable it by setting via no-cache prop.
-
+
+ `,
+});
+
+export const MorphemeIcons: StoryFn = (args) => ({
+ components: {Icon},
+ setup() {
+ return {args};
+ },
+ template: `
+ Default Collection
+Morpheme Icons
+Non exist
+
+ By default morpheme icons are cached and stored in local storage, but you can disable it by setting via no-cache prop.
+
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- {{ title }}
- {{ subtitle }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/packages/layouts/src/Grid.spec.ts b/packages/ui/src/layouts/src/Grid.spec.ts
similarity index 95%
rename from packages/layouts/src/Grid.spec.ts
rename to packages/ui/src/layouts/src/Grid.spec.ts
index 9efcb7107..5f7890d75 100644
--- a/packages/layouts/src/Grid.spec.ts
+++ b/packages/ui/src/layouts/src/Grid.spec.ts
@@ -1,60 +1,60 @@
-import { mount } from '@vue/test-utils';
-import VRow from './VRow.vue'
-import VCol from './VCol.vue'
-
-test('VRow renders correctly', () => {
- const wrapper = mount(VRow, {
- slots: {
- default: `
-
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+ {{ subtitle }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 1
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- {{ stat.value }}
-
-
+ 1
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ {{ stat.value }}
+
+ -
-
-
-
-
-
Default
--
-
Small
--
-
Dense
--
-
Large
--
-
-
-
-
-
-
-
Default
--
-
-
-
With Context API
--
-
-
-
-
-
-
-
-
-
-
-
- prepend
-
-
-
-
- append
-
-
-
- default slot
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ user.name }}
-
- - {{ user.email }} -
-
-
-
-
- `,
-});
-
-export const IosSettings: StoryFn = (args) => ({
- components: {
- List,
- ListItem,
- ListItemDivider,
- Icon,
- },
- setup() {
- return {args};
- },
- template: `
- Morpheme
- -
-
-
-
-
- Toggle Open
- Toggle Mini
-
- -
-
-
-
-
- John Doe
- - Apple ID, iCloud+, Media & Purchases -
--
-
-
-
-
-
-
- John Doe
- - Apple ID, iCloud+, Media & Purchases -
--
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- {{ menu.title }}
-
-
- {{ child.title }}
-
-
- -
+
-
+
-
+
Default
+-
+
Small
+-
+
Dense
+-
+
Large
+-
+
-
+
-
+
-
+
Default
+-
+
-
+
With Context API
+-
+
-
+
-
+
-
+
-
+
-
+
+ prepend
+
+
+
+
+ append
+
+
+
+ default slot
+ -
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+ {{ user.name }}
+
+ + {{ user.email }} +
+
+
+
+
+ `,
+});
+
+export const IosSettings: StoryFn = (args) => ({
+ components: {
+ List,
+ ListItem,
+ ListItemDivider,
+ Icon,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+ Morpheme
+ -
+
+
-
+
+ Toggle Open
+ Toggle Mini
+
+ -
+
+
+
+
+ John Doe
+ + Apple ID, iCloud+, Media & Purchases +
+-
+
-
+
+
+
+
+ John Doe
+ + Apple ID, iCloud+, Media & Purchases +
+-
+
-
+
-
+
-
+
-
+
+
+
+ -
+
+
+
+ {{ menu.title }}
+
+
+ {{ child.title }}
+
+
+
-
-
+import { VListInjectionKey } from "./api";
+
+type Props = {
+ hidePrepend?: boolean;
+ hideAppend?: boolean;
+ shaped?: boolean;
+ rounded?: boolean;
+ tile?: boolean;
+ hover?: boolean;
+ flush?: boolean;
+ dense?: boolean;
+ small?: boolean;
+ large?: boolean;
+ hideText?: boolean;
+ activeVariant?: "filled" | "bordered" | "filled-bordered";
+ activeBorderPosition?: "top" | "right" | "bottom" | "left";
+ mini?: boolean;
+};
+
+const props = withDefaults(defineProps
+
+
diff --git a/packages/list/src/ListCollapse.vue b/packages/ui/src/list/src/ListCollapse.vue
similarity index 95%
rename from packages/list/src/ListCollapse.vue
rename to packages/ui/src/list/src/ListCollapse.vue
index 069201823..b4ae60508 100644
--- a/packages/list/src/ListCollapse.vue
+++ b/packages/ui/src/list/src/ListCollapse.vue
@@ -1,6 +1,6 @@
-
-
-
-
-
-
-
-
-
-
-
- {{ appendText }}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {{ appendText }}
+
+
+
+
+
+
-
-
+
+
-
- Default
-
-
-
- Small
-
-
-
- Right
-
-
-
- `,
-});
-
-export const Slots: StoryFn = (args) => ({
- components: {
- VAppBar,
- VMenus,
- VMenusItem,
- },
- setup() {
- return {args};
- },
- template: `
-
-
- `,
-});
+import type { Meta, StoryFn } from '@storybook/vue3';
+import VMenus from './VMenus.vue';
+import VMenusItem from './VMenusItem.vue';
+import VAppBar from '../../app-bar/src';
+import VMenusCustom from './stories/VMenusCustom.vue';
+import { ref } from 'vue';
+
+const items = [
+ {
+ text: 'Home',
+ to: '/',
+ },
+ {
+ text: 'About',
+ to: '/faq',
+ },
+ {
+ text: 'FAQ',
+ to: '/faq',
+ },
+];
+
+export default {
+ title: 'Components/Menus',
+ component: VMenus,
+ argTypes: {},
+ args: {
+ items,
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: {
+ VMenus,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ Default
+
+
+
+ Small
+
+
+
+ Right
+
+
+
+ `,
+});
+
+export const Slots: StoryFn = (args) => ({
+ components: {
+ VAppBar,
+ VMenus,
+ VMenusItem,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ `,
+});
diff --git a/packages/menus/src/VMenus.vue b/packages/ui/src/menus/src/VMenus.vue
similarity index 94%
rename from packages/menus/src/VMenus.vue
rename to packages/ui/src/menus/src/VMenus.vue
index 79cc77292..565d6d045 100644
--- a/packages/menus/src/VMenus.vue
+++ b/packages/ui/src/menus/src/VMenus.vue
@@ -1,131 +1,131 @@
-
-
-
- Are you sure want to delete this item?
-
-
-
- Click Me
-
- Hello World
-
-
- `,
-});
-
-export const Tailwind: StoryFn = (args) => ({
- components: {VModal, VCard},
- setup() {
- return {args};
- },
- template: `
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi - ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, - sunt in culpa qui officia deserunt mollit anim id est laborum. -
- -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
-
-
- `,
-});
-
-export const Declarative: StoryFnLorem ipsum dolor sit amet, consectetur adipiscing elit
-Are you sure want to delete this item?
+
+
+
+ Click Me
+
+ Hello World
+
+
+ `,
+});
+
+export const Tailwind: StoryFn = (args) => ({
+ components: { VModal, VCard },
+ setup() {
+ return { args };
+ },
+ template: `
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi + ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit + in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
+ +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+
+
+ `,
+});
+
+export const Declarative: StoryFnLorem ipsum dolor sit amet, consectetur adipiscing elit
+
-
- `,
-});
+import VMultiSelect from './VMultiSelect.vue';
+import VBtn from '../../button/src';
+import { useForm } from 'vee-validate';
+import { object, array } from 'yup';
+import { computed, ref, onMounted } from 'vue';
+import type { VMultiSelectItem } from './types';
+import type { Story } from '@storybook/vue3';
+
+const items = [...Array(200)].map((_, index) => ({
+ value: index + 1,
+ text: `Option ${index + 1}`,
+}));
+
+const genreItems = [
+ 'pop',
+ 'rock',
+ 'jazz',
+ 'alternative',
+ 'electronic',
+ 'classical',
+ 'hiphop',
+ 'blues',
+].map((e) => ({ text: e.toUpperCase(), value: e }));
+
+const userItems = [
+ {
+ name: {
+ title: 'Miss',
+ first: 'Laura',
+ last: 'Woods',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/women/88.jpg',
+ country: 'Ireland',
+ email: 'laura.woods@example.com',
+ nat: 'IE',
+ },
+ {
+ name: {
+ title: 'Mr',
+ first: 'Marten',
+ last: 'Faber',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
+ country: 'Germany',
+ email: 'marten.faber@example.com',
+ nat: 'DE',
+ },
+ {
+ name: {
+ title: 'Miss',
+ first: 'Christy',
+ last: 'Diaz',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/women/53.jpg',
+ country: 'Australia',
+ email: 'christy.diaz@example.com',
+ nat: 'AU',
+ },
+ {
+ name: {
+ title: 'Mrs',
+ first: 'Naomi',
+ last: 'Ortiz',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/women/10.jpg',
+ country: 'Australia',
+ email: 'naomi.ortiz@example.com',
+ nat: 'AU',
+ },
+ {
+ name: {
+ title: 'Miss',
+ first: 'Emeline',
+ last: 'Carpentier',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/women/95.jpg',
+ country: 'France',
+ email: 'emeline.carpentier@example.com',
+ nat: 'FR',
+ },
+ {
+ name: {
+ title: 'Mr',
+ first: 'Jun',
+ last: 'Hansen',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
+ country: 'Netherlands',
+ email: 'jun.hansen@example.com',
+ nat: 'NL',
+ },
+ {
+ name: {
+ title: 'Miss',
+ first: 'Carla',
+ last: 'Fernández',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/women/52.jpg',
+ country: 'Spain',
+ email: 'carla.fernandez@example.com',
+ nat: 'ES',
+ },
+ {
+ name: {
+ title: 'Ms',
+ first: 'Vandana',
+ last: 'Dalvi',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/women/16.jpg',
+ country: 'India',
+ email: 'vandana.dalvi@example.com',
+ nat: 'IN',
+ },
+ {
+ name: {
+ title: 'Mrs',
+ first: 'Nurdan',
+ last: 'Köybaşı',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/women/86.jpg',
+ country: 'Turkey',
+ email: 'nurdan.koybasi@example.com',
+ nat: 'TR',
+ },
+ {
+ name: {
+ title: 'Mr',
+ first: 'Marc',
+ last: 'Shaw',
+ },
+ picture: 'https://randomuser.me/api/portraits/thumb/men/92.jpg',
+ country: 'United States',
+ email: 'marc.shaw@example.com',
+ nat: 'US',
+ },
+];
+
+export default {
+ title: 'Forms/MultiSelect',
+ component: VMultiSelect,
+ args: { items },
+};
+
+const Template = (args) => ({
+ components: {
+ VMultiSelect,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+
+ `,
+});
diff --git a/packages/multi-select/src/VMultiSelect.vue b/packages/ui/src/multi-select/src/VMultiSelect.vue
similarity index 94%
rename from packages/multi-select/src/VMultiSelect.vue
rename to packages/ui/src/multi-select/src/VMultiSelect.vue
index 24038ed0c..2265a389f 100644
--- a/packages/multi-select/src/VMultiSelect.vue
+++ b/packages/ui/src/multi-select/src/VMultiSelect.vue
@@ -1,644 +1,643 @@
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ sItem[itemText] }}
-
-
-
-
-
-
-
-
- {{ uncontrolledValue.length - maxBadge }} more
-
-
-
-
-
-
-
-
-
-
-
-
-
- Clear
-
-
-
-
-
-
-
-
-
-
-
- Loading...
-
-
-
-
-
-
-
- {{ isAllSelected ? 'Deselect All' : 'Select All' }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item[itemText] }}
-
-
-
- No Data
-
-
-
- {{ errorMessage }}
-
-
+import {ErrorMessage} from 'vee-validate';
+import Icon from '../../icon/src';
+import type {VMultiSelectItem} from './types';
+import {useFormValue, type ValidationMode} from '../../forms/src';
+
+type SearchByFunction = (item: VMultiSelectItem, search: string) => boolean;
+
+const props = defineProps({
+ modelValue: {
+ type: Array as PropType
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ sItem[itemText] }}
+
+
+
+
+
+
+
+
+ {{ uncontrolledValue.length - maxBadge }} more
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Clear
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+ {{ isAllSelected ? 'Deselect All' : 'Select All' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item[itemText] }}
+
+
+
+ No Data
+
+
+
+ {{ errorMessage }}
+
+
diff --git a/packages/multi-select/src/index.ts b/packages/ui/src/multi-select/src/index.ts
similarity index 100%
rename from packages/multi-select/src/index.ts
rename to packages/ui/src/multi-select/src/index.ts
diff --git a/packages/multi-select/src/types.ts b/packages/ui/src/multi-select/src/types.ts
similarity index 100%
rename from packages/multi-select/src/types.ts
rename to packages/ui/src/multi-select/src/types.ts
diff --git a/packages/progress-circlular/src/vue.d.ts b/packages/ui/src/multi-select/src/vue.d.ts
similarity index 100%
rename from packages/progress-circlular/src/vue.d.ts
rename to packages/ui/src/multi-select/src/vue.d.ts
diff --git a/packages/pagination/tailwind.config.js b/packages/ui/src/multi-select/tailwind.config.js
similarity index 100%
rename from packages/pagination/tailwind.config.js
rename to packages/ui/src/multi-select/tailwind.config.js
diff --git a/packages/progress/tsconfig.json b/packages/ui/src/multi-select/tsconfig.json
similarity index 100%
rename from packages/progress/tsconfig.json
rename to packages/ui/src/multi-select/tsconfig.json
diff --git a/packages/multi-select/vite.config.js b/packages/ui/src/multi-select/vite.config.js
similarity index 100%
rename from packages/multi-select/vite.config.js
rename to packages/ui/src/multi-select/vite.config.js
diff --git a/packages/nav-drawer/CHANGELOG.md b/packages/ui/src/nav-drawer/CHANGELOG.md
similarity index 100%
rename from packages/nav-drawer/CHANGELOG.md
rename to packages/ui/src/nav-drawer/CHANGELOG.md
diff --git a/packages/nav-drawer/README.md b/packages/ui/src/nav-drawer/README.md
similarity index 100%
rename from packages/nav-drawer/README.md
rename to packages/ui/src/nav-drawer/README.md
diff --git a/packages/nav-drawer/package.json b/packages/ui/src/nav-drawer/package.json
similarity index 100%
rename from packages/nav-drawer/package.json
rename to packages/ui/src/nav-drawer/package.json
diff --git a/packages/progress-circlular/postcss.config.js b/packages/ui/src/nav-drawer/postcss.config.js
similarity index 100%
rename from packages/progress-circlular/postcss.config.js
rename to packages/ui/src/nav-drawer/postcss.config.js
diff --git a/packages/nav-drawer/src/NavDrawer.dark.scss b/packages/ui/src/nav-drawer/src/NavDrawer.dark.scss
similarity index 100%
rename from packages/nav-drawer/src/NavDrawer.dark.scss
rename to packages/ui/src/nav-drawer/src/NavDrawer.dark.scss
diff --git a/packages/nav-drawer/src/NavDrawer.scss b/packages/ui/src/nav-drawer/src/NavDrawer.scss
similarity index 100%
rename from packages/nav-drawer/src/NavDrawer.scss
rename to packages/ui/src/nav-drawer/src/NavDrawer.scss
diff --git a/packages/nav-drawer/src/NavDrawer.stories.ts b/packages/ui/src/nav-drawer/src/NavDrawer.stories.ts
similarity index 86%
rename from packages/nav-drawer/src/NavDrawer.stories.ts
rename to packages/ui/src/nav-drawer/src/NavDrawer.stories.ts
index bcefda449..53497e629 100644
--- a/packages/nav-drawer/src/NavDrawer.stories.ts
+++ b/packages/ui/src/nav-drawer/src/NavDrawer.stories.ts
@@ -1,437 +1,437 @@
-import {navDrawerHeights} from './types';
-import NavDrawer from './NavDrawer.vue';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {ref} from 'vue';
-import Button from '@morpheme/button';
-import {colors} from './colors';
-import NavDrawerCustom from './stories/NavDrawerCustom.vue';
-import NavDrawerResizer from './NavDrawerResizer.vue';
-
-export default {
- title: 'Components/NavigationDrawer',
- component: NavDrawer,
-} as MetaHello World
-
-
-
-
- `,
-});
-
-export const Sticky: StoryFn- Fixed NavDrawer -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Curabitur consequat facilisis purus ac consectetur. - Cras interdum nisi vitae metus pharetra dignissim. - Curabitur pulvinar ex purus, id ultrices ligula dictum at. - Integer ac libero dui. Vivamus posuere molestie enim in tempus. - Sed neque arcu, pharetra non laoreet a, efficitur id leo. - Nullam facilisis massa velit, ut sollicitudin magna elementum quis. - Donec pharetra efficitur turpis, nec ultrices leo. - Quisque placerat, dolor sit amet eleifend cursus, libero nisi - feugiat urna, a sodales quam eros id massa. - Nulla tristique neque quis turpis luctus tincidunt. - Vestibulum bibendum lobortis orci, eget semper diam ultricies a. - Nunc in nunc lacus. -
-
-
-
-
- `,
-});
-
-export const Toggle: StoryFn- Sticky NavDrawer -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Curabitur consequat facilisis purus ac consectetur. - Cras interdum nisi vitae metus pharetra dignissim. - Curabitur pulvinar ex purus, id ultrices ligula dictum at. - Integer ac libero dui. Vivamus posuere molestie enim in tempus. - Sed neque arcu, pharetra non laoreet a, efficitur id leo. - Nullam facilisis massa velit, ut sollicitudin magna elementum quis. - Donec pharetra efficitur turpis, nec ultrices leo. - Quisque placerat, dolor sit amet eleifend cursus, libero nisi - feugiat urna, a sodales quam eros id massa. - Nulla tristique neque quis turpis luctus tincidunt. - Vestibulum bibendum lobortis orci, eget semper diam ultricies a. - Nunc in nunc lacus. -
-
-
-
-
-
-
-
- `,
-});
-
-export const Mini: StoryFn- Toggle (v-model) -
-
-
-
-
-
-
-
- `,
-});
-
-export const ExpandOnHover: StoryFn- Mini -
-
-
-
-
-
-
-
- `,
-});
-
-export const Right: StoryFn- Expand on Hover -
-
-
-
-
-
-
-
-
- `,
-});
-
-export const Overlay = Right.bind({});
-Overlay.args = {
- fixed: true,
- overlay: true,
-};
-
-export const CustomTransition: StoryFn
-
- - Right NavDrawer + Transition -
- -
-
-
-
-
-
-
-
- `,
-});
-
-export const CustomColor: StoryFn- NavDrawer + Transition -
-
-
-
-
-
-
-
- `,
-});
-
-export const HeightVariants: StoryFn{{ color }}
-Bordered
-- {{ height }} -
-- Custom Prop: 200px -
-- With custom class: h-[200px] -
-- Custom Class: h-[calc(100vh-100px)] -
-- Bottom Drawer -
-- Top Drawer -
-- Hover on the edge to resize -
-Hello World
+
+
+
+
+ `,
+});
+
+export const Sticky: StoryFn+ Fixed NavDrawer +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Curabitur consequat facilisis purus ac consectetur. + Cras interdum nisi vitae metus pharetra dignissim. + Curabitur pulvinar ex purus, id ultrices ligula dictum at. + Integer ac libero dui. Vivamus posuere molestie enim in tempus. + Sed neque arcu, pharetra non laoreet a, efficitur id leo. + Nullam facilisis massa velit, ut sollicitudin magna elementum quis. + Donec pharetra efficitur turpis, nec ultrices leo. + Quisque placerat, dolor sit amet eleifend cursus, libero nisi + feugiat urna, a sodales quam eros id massa. + Nulla tristique neque quis turpis luctus tincidunt. + Vestibulum bibendum lobortis orci, eget semper diam ultricies a. + Nunc in nunc lacus. +
+
+
+
+
+ `,
+});
+
+export const Toggle: StoryFn+ Sticky NavDrawer +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Curabitur consequat facilisis purus ac consectetur. + Cras interdum nisi vitae metus pharetra dignissim. + Curabitur pulvinar ex purus, id ultrices ligula dictum at. + Integer ac libero dui. Vivamus posuere molestie enim in tempus. + Sed neque arcu, pharetra non laoreet a, efficitur id leo. + Nullam facilisis massa velit, ut sollicitudin magna elementum quis. + Donec pharetra efficitur turpis, nec ultrices leo. + Quisque placerat, dolor sit amet eleifend cursus, libero nisi + feugiat urna, a sodales quam eros id massa. + Nulla tristique neque quis turpis luctus tincidunt. + Vestibulum bibendum lobortis orci, eget semper diam ultricies a. + Nunc in nunc lacus. +
+
+
+
+
+
+
+
+ `,
+});
+
+export const Mini: StoryFn+ Toggle (v-model) +
+
+
+
+
+
+
+
+ `,
+});
+
+export const ExpandOnHover: StoryFn+ Mini +
+
+
+
+
+
+
+
+ `,
+});
+
+export const Right: StoryFn+ Expand on Hover +
+
+
+
+
+
+
+
+
+ `,
+});
+
+export const Overlay = Right.bind({});
+Overlay.args = {
+ fixed: true,
+ overlay: true,
+};
+
+export const CustomTransition: StoryFn
+
+ + Right NavDrawer + Transition +
+ +
+
+
+
+
+
+
+
+ `,
+});
+
+export const CustomColor: StoryFn+ NavDrawer + Transition +
+
+
+
+
+
+
+
+ `,
+});
+
+export const HeightVariants: StoryFn{{ color }}
+Bordered
++ {{ height }} +
++ Custom Prop: 200px +
++ With custom class: h-[200px] +
++ Custom Class: h-[calc(100vh-100px)] +
++ Bottom Drawer +
++ Top Drawer +
++ Hover on the edge to resize +
+
diff --git a/packages/nav-drawer/src/deprecated/VNavDrawer.vue b/packages/ui/src/nav-drawer/src/deprecated/VNavDrawer.vue
similarity index 92%
rename from packages/nav-drawer/src/deprecated/VNavDrawer.vue
rename to packages/ui/src/nav-drawer/src/deprecated/VNavDrawer.vue
index 839fccde5..7801f87f9 100644
--- a/packages/nav-drawer/src/deprecated/VNavDrawer.vue
+++ b/packages/ui/src/nav-drawer/src/deprecated/VNavDrawer.vue
@@ -1,279 +1,279 @@
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {{ args.label }} `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = {
- docs: {
- source: {
- code: '
- Prev
- Next
- First
- Last
-
- `,
-});
-
-export const Variants: StoryFn = (args) => ({
- components: {VPagination},
- setup() {
- return {args, variants};
- },
- template: `
- {{ args.label }} `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+ docs: {
+ source: {
+ code: '
+ Prev
+ Next
+ First
+ Last
+
+ `,
+});
+
+export const Variants: StoryFn = (args) => ({
+ components: {VPagination},
+ setup() {
+ return {args, variants};
+ },
+ template: `
+
- Click me
-
-
-
- `,
-});
-
-export const Placement: StoryFn = (args) => ({
- components: {VPopover, VPopoverButton, VPopoverPanel},
- setup() {
- return {args, popoverPlacements};
- },
- template: `
-
- Click me
-
-
-
- `,
-});
-
-export const Group: StoryFn = (args) => ({
- components: {
- VPopover,
- VPopoverButton,
- VPopoverPanel,
- VPopoverOverlay,
- VPopoverGroup,
- },
- setup() {
- return {args};
- },
- template: `
-
-
- Click me
-
-
-
-
- Click me
-
-
-
-
- `,
-});
-
-export const NavigationMenus: StoryFn = (args) => ({
- components: {
- VPopover,
- VPopoverButton,
- VPopoverPanel,
- VPopoverOverlay,
- VPopoverGroup,
- VAppBar,
- VLogo,
- VList,
- VListItem,
- },
- setup() {
- return {args};
- },
- template: `
-
-
- `,
-});
-
-export const WithList: StoryFn = (args) => ({
- components: {
- VPopover,
- VPopoverButton,
- VPopoverPanel,
- VList,
- VListItem,
- VDivider,
- },
- setup() {
- return {args};
- },
- template: `
-
- Click me
-
-
- View
- Edit
- Delete
-
-
-
- `,
-});
-
-export const DarkMode: StoryFn = (args) => ({
- components: {
- VPopover,
- VPopoverButton,
- VPopoverPanel,
- VList,
- VListItem,
- VDivider,
- },
- setup() {
- return {args};
- },
- template: `
-
-
- Click me
-
-
- View
- Edit
- Delete
-
-
-
-
- `,
-});
+import { VLogo } from '../../logo/src';
+import { VAppBar } from '../../app-bar/src';
+import type { StoryFn } from '@storybook/vue3';
+import VPopover from './VPopover.vue';
+import VPopoverButton from './VPopoverButton.vue';
+import VPopoverPanel from './VPopoverPanel.vue';
+import VPopoverOverlay from './VPopoverOverlay.vue';
+import VPopoverGroup from './VPopoverGroup.vue';
+import { popoverPlacements } from './api';
+import { List as VList, ListItem as VListItem } from '../../list/src';
+import { VDivider } from '../../divider/src';
+
+export default {
+ title: 'Components/Popover',
+ component: VPopover,
+};
+
+export const Default: StoryFn = (args) => ({
+ components: { VPopover, VPopoverButton, VPopoverPanel },
+ setup() {
+ return { args };
+ },
+ template: `
+
+ Click me
+
+
+
+ `,
+});
+
+export const Placement: StoryFn = (args) => ({
+ components: { VPopover, VPopoverButton, VPopoverPanel },
+ setup() {
+ return { args, popoverPlacements };
+ },
+ template: `
+
+ Click me
+
+
+
+ `,
+});
+
+export const Group: StoryFn = (args) => ({
+ components: {
+ VPopover,
+ VPopoverButton,
+ VPopoverPanel,
+ VPopoverOverlay,
+ VPopoverGroup,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ Click me
+
+
+
+
+ Click me
+
+
+
+
+ `,
+});
+
+export const NavigationMenus: StoryFn = (args) => ({
+ components: {
+ VPopover,
+ VPopoverButton,
+ VPopoverPanel,
+ VPopoverOverlay,
+ VPopoverGroup,
+ VAppBar,
+ VLogo,
+ VList,
+ VListItem,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ `,
+});
+
+export const WithList: StoryFn = (args) => ({
+ components: {
+ VPopover,
+ VPopoverButton,
+ VPopoverPanel,
+ VList,
+ VListItem,
+ VDivider,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+
+ Click me
+
+
+ View
+ Edit
+ Delete
+
+
+
+ `,
+});
+
+export const DarkMode: StoryFn = (args) => ({
+ components: {
+ VPopover,
+ VPopoverButton,
+ VPopoverPanel,
+ VList,
+ VListItem,
+ VDivider,
+ },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ Click me
+
+
+ View
+ Edit
+ Delete
+
+
+
+
+ `,
+});
diff --git a/packages/popover/src/VPopover.vue b/packages/ui/src/popover/src/VPopover.vue
similarity index 100%
rename from packages/popover/src/VPopover.vue
rename to packages/ui/src/popover/src/VPopover.vue
diff --git a/packages/popover/src/VPopoverButton.vue b/packages/ui/src/popover/src/VPopoverButton.vue
similarity index 88%
rename from packages/popover/src/VPopoverButton.vue
rename to packages/ui/src/popover/src/VPopoverButton.vue
index 426838866..4ad97c675 100644
--- a/packages/popover/src/VPopoverButton.vue
+++ b/packages/ui/src/popover/src/VPopoverButton.vue
@@ -1,6 +1,6 @@
-
-
-
- {{ value }} %
-
-
-
- {{ value }} %
-
-
- `,
-});
-
-export const VModel: StoryFn = (args) => ({
- components: {VProgressBar, VBtn},
- setup() {
- const value = ref(10);
- return {args, value};
- },
- template: `
-
+ {{ value }} %
+
+
+
+ {{ value }} %
+
+
+ `,
+});
+
+export const VModel: StoryFn = (args) => ({
+ components: { VProgressBar, VBtn },
+ setup() {
+ const value = ref(10);
+ return { args, value };
+ },
+ template: `
+ ;
const Template: StoryFn = (args) => ({
- components: {VQuillEditor},
+ components: { VQuillEditor },
setup() {
const value = ref('');
- return {args, value};
+ return { args, value };
},
template: `
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/packages/nav-drawer/src/index.ts b/packages/ui/src/nav-drawer/src/index.ts
similarity index 100%
rename from packages/nav-drawer/src/index.ts
rename to packages/ui/src/nav-drawer/src/index.ts
diff --git a/packages/nav-drawer/src/stories/NavDrawerCustom.vue b/packages/ui/src/nav-drawer/src/stories/NavDrawerCustom.vue
similarity index 100%
rename from packages/nav-drawer/src/stories/NavDrawerCustom.vue
rename to packages/ui/src/nav-drawer/src/stories/NavDrawerCustom.vue
diff --git a/packages/nav-drawer/src/types.ts b/packages/ui/src/nav-drawer/src/types.ts
similarity index 100%
rename from packages/nav-drawer/src/types.ts
rename to packages/ui/src/nav-drawer/src/types.ts
diff --git a/packages/progress/src/vue.d.ts b/packages/ui/src/nav-drawer/src/vue.d.ts
similarity index 100%
rename from packages/progress/src/vue.d.ts
rename to packages/ui/src/nav-drawer/src/vue.d.ts
diff --git a/packages/progress-circlular/tailwind.config.js b/packages/ui/src/nav-drawer/tailwind.config.js
similarity index 100%
rename from packages/progress-circlular/tailwind.config.js
rename to packages/ui/src/nav-drawer/tailwind.config.js
diff --git a/packages/nav-drawer/tsconfig.json b/packages/ui/src/nav-drawer/tsconfig.json
similarity index 100%
rename from packages/nav-drawer/tsconfig.json
rename to packages/ui/src/nav-drawer/tsconfig.json
diff --git a/packages/nav-drawer/vite.config.js b/packages/ui/src/nav-drawer/vite.config.js
similarity index 100%
rename from packages/nav-drawer/vite.config.js
rename to packages/ui/src/nav-drawer/vite.config.js
diff --git a/packages/navbar/CHANGELOG.md b/packages/ui/src/navbar/CHANGELOG.md
similarity index 100%
rename from packages/navbar/CHANGELOG.md
rename to packages/ui/src/navbar/CHANGELOG.md
diff --git a/packages/navbar/README.md b/packages/ui/src/navbar/README.md
similarity index 100%
rename from packages/navbar/README.md
rename to packages/ui/src/navbar/README.md
diff --git a/packages/navbar/package.json b/packages/ui/src/navbar/package.json
similarity index 100%
rename from packages/navbar/package.json
rename to packages/ui/src/navbar/package.json
diff --git a/packages/progress/postcss.config.js b/packages/ui/src/navbar/postcss.config.js
similarity index 100%
rename from packages/progress/postcss.config.js
rename to packages/ui/src/navbar/postcss.config.js
diff --git a/packages/navbar/src/Changelog.stories.mdx b/packages/ui/src/navbar/src/Changelog.stories.mdx
similarity index 96%
rename from packages/navbar/src/Changelog.stories.mdx
rename to packages/ui/src/navbar/src/Changelog.stories.mdx
index 30af6dbf8..403200aad 100644
--- a/packages/navbar/src/Changelog.stories.mdx
+++ b/packages/ui/src/navbar/src/Changelog.stories.mdx
@@ -1,6 +1,6 @@
-import {Meta, Description} from '@storybook/addon-docs';
-import Changelog from '../CHANGELOG.md';
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/packages/navbar/src/index.ts b/packages/ui/src/navbar/src/index.ts
similarity index 100%
rename from packages/navbar/src/index.ts
rename to packages/ui/src/navbar/src/index.ts
diff --git a/packages/navbar/src/types.ts b/packages/ui/src/navbar/src/types.ts
similarity index 100%
rename from packages/navbar/src/types.ts
rename to packages/ui/src/navbar/src/types.ts
diff --git a/packages/quill-editor/src/vue.d.ts b/packages/ui/src/navbar/src/vue.d.ts
similarity index 100%
rename from packages/quill-editor/src/vue.d.ts
rename to packages/ui/src/navbar/src/vue.d.ts
diff --git a/packages/progress/tailwind.config.js b/packages/ui/src/navbar/tailwind.config.js
similarity index 100%
rename from packages/progress/tailwind.config.js
rename to packages/ui/src/navbar/tailwind.config.js
diff --git a/packages/quill-editor/tsconfig.json b/packages/ui/src/navbar/tsconfig.json
similarity index 100%
rename from packages/quill-editor/tsconfig.json
rename to packages/ui/src/navbar/tsconfig.json
diff --git a/packages/navbar/vite.config.js b/packages/ui/src/navbar/vite.config.js
similarity index 100%
rename from packages/navbar/vite.config.js
rename to packages/ui/src/navbar/vite.config.js
diff --git a/packages/pagination/CHANGELOG.md b/packages/ui/src/pagination/CHANGELOG.md
similarity index 100%
rename from packages/pagination/CHANGELOG.md
rename to packages/ui/src/pagination/CHANGELOG.md
diff --git a/packages/pagination/README.md b/packages/ui/src/pagination/README.md
similarity index 100%
rename from packages/pagination/README.md
rename to packages/ui/src/pagination/README.md
diff --git a/packages/pagination/package.json b/packages/ui/src/pagination/package.json
similarity index 100%
rename from packages/pagination/package.json
rename to packages/ui/src/pagination/package.json
diff --git a/packages/select/postcss.config.js b/packages/ui/src/pagination/postcss.config.js
similarity index 100%
rename from packages/select/postcss.config.js
rename to packages/ui/src/pagination/postcss.config.js
diff --git a/packages/pagination/src/Changelog.stories.mdx b/packages/ui/src/pagination/src/Changelog.stories.mdx
similarity index 100%
rename from packages/pagination/src/Changelog.stories.mdx
rename to packages/ui/src/pagination/src/Changelog.stories.mdx
diff --git a/packages/pagination/src/Readme.stories.mdx b/packages/ui/src/pagination/src/Readme.stories.mdx
similarity index 100%
rename from packages/pagination/src/Readme.stories.mdx
rename to packages/ui/src/pagination/src/Readme.stories.mdx
diff --git a/packages/pagination/src/VPagination.dark.scss b/packages/ui/src/pagination/src/VPagination.dark.scss
similarity index 100%
rename from packages/pagination/src/VPagination.dark.scss
rename to packages/ui/src/pagination/src/VPagination.dark.scss
diff --git a/packages/pagination/src/VPagination.scss b/packages/ui/src/pagination/src/VPagination.scss
similarity index 100%
rename from packages/pagination/src/VPagination.scss
rename to packages/ui/src/pagination/src/VPagination.scss
diff --git a/packages/pagination/src/VPagination.spec.ts b/packages/ui/src/pagination/src/VPagination.spec.ts
similarity index 100%
rename from packages/pagination/src/VPagination.spec.ts
rename to packages/ui/src/pagination/src/VPagination.spec.ts
diff --git a/packages/pagination/src/VPagination.stories.ts b/packages/ui/src/pagination/src/VPagination.stories.ts
similarity index 95%
rename from packages/pagination/src/VPagination.stories.ts
rename to packages/ui/src/pagination/src/VPagination.stories.ts
index 3ae7bf20d..1d8516297 100644
--- a/packages/pagination/src/VPagination.stories.ts
+++ b/packages/ui/src/pagination/src/VPagination.stories.ts
@@ -1,163 +1,163 @@
-import type {Meta, StoryFn} from '@storybook/vue3';
-import VPagination from './VPagination.vue';
-
-const variants = ['default', 'text', 'text-rounded'];
-
-export default {
- title: 'Components/Pagination',
- component: VPagination,
- argTypes: {
- btnLast: {
- control: {type: 'text'},
- defaultValue: '',
- table: {category: 'Slots'},
- },
- btnFirst: {
- control: {type: 'text'},
- defaultValue: '',
- table: {category: 'Slots'},
- },
- btnNext: {
- control: {type: 'text'},
- defaultValue: '',
- table: {category: 'Slots'},
- },
- btnPrev: {
- control: {type: 'text'},
- defaultValue: '',
- table: {category: 'Slots'},
- },
- },
- args: {
- totalItems: 100,
- itemsPerPage: 10,
- large: false,
- small: false,
- showFirst: true,
- showPrevious: true,
- showNext: true,
- showLast: true,
- showNumber: true,
- siblingCount: 1,
- boundaryCount: 1,
- simple: false,
- btnLast: '',
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VPagination},
- setup() {
- return {args};
- },
- template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- `,
-});
+import type {Meta, StoryFn} from '@storybook/vue3';
+import VPagination from './VPagination.vue';
+
+const variants = ['default', 'text', 'text-rounded'];
+
+export default {
+ title: 'Components/Pagination',
+ component: VPagination,
+ argTypes: {
+ btnLast: {
+ control: {type: 'text'},
+ defaultValue: '',
+ table: {category: 'Slots'},
+ },
+ btnFirst: {
+ control: {type: 'text'},
+ defaultValue: '',
+ table: {category: 'Slots'},
+ },
+ btnNext: {
+ control: {type: 'text'},
+ defaultValue: '',
+ table: {category: 'Slots'},
+ },
+ btnPrev: {
+ control: {type: 'text'},
+ defaultValue: '',
+ table: {category: 'Slots'},
+ },
+ },
+ args: {
+ totalItems: 100,
+ itemsPerPage: 10,
+ large: false,
+ small: false,
+ showFirst: true,
+ showPrevious: true,
+ showNext: true,
+ showLast: true,
+ showNumber: true,
+ siblingCount: 1,
+ boundaryCount: 1,
+ simple: false,
+ btnLast: '',
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: {VPagination},
+ setup() {
+ return {args};
+ },
+ template: `
+
+ `,
+});
diff --git a/packages/pagination/src/VPagination.vue b/packages/ui/src/pagination/src/VPagination.vue
similarity index 94%
rename from packages/pagination/src/VPagination.vue
rename to packages/ui/src/pagination/src/VPagination.vue
index 319f09858..0f8acf639 100644
--- a/packages/pagination/src/VPagination.vue
+++ b/packages/ui/src/pagination/src/VPagination.vue
@@ -1,267 +1,267 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ...
-
-
- {{ item }}
-
-
- {{ item }}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ...
+
+
+ {{ item }}
+
+
+ {{ item }}
+
+
+
+
diff --git a/packages/pagination/src/VPaginationItem.vue b/packages/ui/src/pagination/src/VPaginationItem.vue
similarity index 96%
rename from packages/pagination/src/VPaginationItem.vue
rename to packages/ui/src/pagination/src/VPaginationItem.vue
index a39755115..f517a9a52 100644
--- a/packages/pagination/src/VPaginationItem.vue
+++ b/packages/ui/src/pagination/src/VPaginationItem.vue
@@ -1,5 +1,5 @@
-
-
- Popover content
-
-
-
- {{ placement }}
-
-
-
-
-
- `,
-});
-
-export const Overlay: StoryFn = (args) => ({
- components: {VPopover, VPopoverButton, VPopoverPanel, VPopoverOverlay},
- setup() {
- return {args};
- },
- template: `
- Popover content
-Popover content
-Popover content
-Popover content
-
-
-
-
- Home
-
-
-
-
- Getting Started
-
-
-
-
-
-
- Components
-
-
-
-
-
-
-
-
-
-
- - Morpheme UI -
-- Morpheme UI is a free and open-source Vue UI Library based on Morpheme Design System -
-
-
-
-
- - Introduction -
-- Learn more about Morpheme UI -
-
-
- - Installation -
-- Learn how to install Morpheme UI -
-
-
- - Typography -
-- Learn more about Morpheme UI typography -
-
-
-
-
- - Alert -
-- Learn more about Morpheme UI -
-
-
- - Card -
-- Learn more about Morpheme UI -
-
-
- - Button -
-- Learn more about Morpheme UI -
-
-
-
-
- - Table -
-- Learn more about Morpheme UI -
-
-
- - Forms -
-- Learn more about Morpheme UI -
-
-
- - Tooltip -
-- Learn more about Morpheme UI -
-Popover content
+
+
+
+ {{ placement }}
+
+
+
+
+
+ `,
+});
+
+export const Overlay: StoryFn = (args) => ({
+ components: { VPopover, VPopoverButton, VPopoverPanel, VPopoverOverlay },
+ setup() {
+ return { args };
+ },
+ template: `
+ Popover content
+Popover content
+Popover content
+Popover content
+
+
+
+
+ Home
+
+
+
+
+ Getting Started
+
+
+
+
+
+
+ Components
+
+
+
+
+
+
+
+
+
+
+ + Morpheme UI +
++ Morpheme UI is a free and open-source Vue UI Library based on Morpheme Design System +
+
+
+
+
+ + Introduction +
++ Learn more about Morpheme UI +
+
+
+ + Installation +
++ Learn how to install Morpheme UI +
+
+
+ + Typography +
++ Learn more about Morpheme UI typography +
+
+
+
+
+ + Alert +
++ Learn more about Morpheme UI +
+
+
+ + Card +
++ Learn more about Morpheme UI +
+
+
+ + Button +
++ Learn more about Morpheme UI +
+
+
+
+
+ + Table +
++ Learn more about Morpheme UI +
+
+
+ + Forms +
++ Learn more about Morpheme UI +
+
+
+ + Tooltip +
++ Learn more about Morpheme UI +
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/packages/progress-circlular/src/index.ts b/packages/ui/src/progress-circular/src/index.ts
similarity index 100%
rename from packages/progress-circlular/src/index.ts
rename to packages/ui/src/progress-circular/src/index.ts
diff --git a/packages/switch/src/vue.d.ts b/packages/ui/src/progress-circular/src/vue.d.ts
similarity index 100%
rename from packages/switch/src/vue.d.ts
rename to packages/ui/src/progress-circular/src/vue.d.ts
diff --git a/packages/select/tailwind.config.js b/packages/ui/src/progress-circular/tailwind.config.js
similarity index 100%
rename from packages/select/tailwind.config.js
rename to packages/ui/src/progress-circular/tailwind.config.js
diff --git a/packages/progress-circlular/tsconfig.json b/packages/ui/src/progress-circular/tsconfig.json
similarity index 100%
rename from packages/progress-circlular/tsconfig.json
rename to packages/ui/src/progress-circular/tsconfig.json
diff --git a/packages/progress-circlular/vite.config.js b/packages/ui/src/progress-circular/vite.config.js
similarity index 100%
rename from packages/progress-circlular/vite.config.js
rename to packages/ui/src/progress-circular/vite.config.js
diff --git a/packages/progress/CHANGELOG.md b/packages/ui/src/progress/CHANGELOG.md
similarity index 100%
rename from packages/progress/CHANGELOG.md
rename to packages/ui/src/progress/CHANGELOG.md
diff --git a/packages/progress/README.md b/packages/ui/src/progress/README.md
similarity index 100%
rename from packages/progress/README.md
rename to packages/ui/src/progress/README.md
diff --git a/packages/progress/package.json b/packages/ui/src/progress/package.json
similarity index 100%
rename from packages/progress/package.json
rename to packages/ui/src/progress/package.json
diff --git a/packages/switch/postcss.config.js b/packages/ui/src/progress/postcss.config.js
similarity index 100%
rename from packages/switch/postcss.config.js
rename to packages/ui/src/progress/postcss.config.js
diff --git a/packages/progress/src/Changelog.stories.mdx b/packages/ui/src/progress/src/Changelog.stories.mdx
similarity index 100%
rename from packages/progress/src/Changelog.stories.mdx
rename to packages/ui/src/progress/src/Changelog.stories.mdx
diff --git a/packages/progress/src/Readme.stories.mdx b/packages/ui/src/progress/src/Readme.stories.mdx
similarity index 100%
rename from packages/progress/src/Readme.stories.mdx
rename to packages/ui/src/progress/src/Readme.stories.mdx
diff --git a/packages/progress/src/VProgressBar.dark.scss b/packages/ui/src/progress/src/VProgressBar.dark.scss
similarity index 100%
rename from packages/progress/src/VProgressBar.dark.scss
rename to packages/ui/src/progress/src/VProgressBar.dark.scss
diff --git a/packages/progress/src/VProgressBar.scss b/packages/ui/src/progress/src/VProgressBar.scss
similarity index 100%
rename from packages/progress/src/VProgressBar.scss
rename to packages/ui/src/progress/src/VProgressBar.scss
diff --git a/packages/progress/src/VProgressBar.spec.ts b/packages/ui/src/progress/src/VProgressBar.spec.ts
similarity index 100%
rename from packages/progress/src/VProgressBar.spec.ts
rename to packages/ui/src/progress/src/VProgressBar.spec.ts
diff --git a/packages/progress/src/VProgressBar.stories.ts b/packages/ui/src/progress/src/VProgressBar.stories.ts
similarity index 79%
rename from packages/progress/src/VProgressBar.stories.ts
rename to packages/ui/src/progress/src/VProgressBar.stories.ts
index 940d39936..0632e5d39 100644
--- a/packages/progress/src/VProgressBar.stories.ts
+++ b/packages/ui/src/progress/src/VProgressBar.stories.ts
@@ -1,111 +1,111 @@
-import VProgressBar from './VProgressBar.vue';
-import {themeColors} from '@morpheme/utils/colors';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {ref} from 'vue';
-import VBtn from '@morpheme/button';
-
-export default {
- title: 'Components/ProgressBar',
- component: VProgressBar,
- argTypes: {
- color: {
- control: 'select',
- options: themeColors,
- },
- },
- args: {
- modelValue: 70,
- },
-} as Meta;
-
-const Template: StoryFn = (args) => ({
- components: {VProgressBar},
- setup() {
- return {args, themeColors};
- },
- template: `
-
- -10
- +10
- Full
- Reset
-
- `,
-});
-
-export const Indeterminate: StoryFn = (args) => ({
- components: {VProgressBar},
- setup() {
- return {args};
- },
- template: `
-
-
- `,
-});
+import VProgressBar from './VProgressBar.vue';
+import { themeColors } from '@morpheme/utils/colors';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue';
+import VBtn from '../../button/src';
+
+export default {
+ title: 'Components/ProgressBar',
+ component: VProgressBar,
+ argTypes: {
+ color: {
+ control: 'select',
+ options: themeColors,
+ },
+ },
+ args: {
+ modelValue: 70,
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { VProgressBar },
+ setup() {
+ return { args, themeColors };
+ },
+ template: `
+
+ -10
+ +10
+ Full
+ Reset
+
+ `,
+});
+
+export const Indeterminate: StoryFn = (args) => ({
+ components: { VProgressBar },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+ `,
+});
diff --git a/packages/progress/src/VProgressBar.vue b/packages/ui/src/progress/src/VProgressBar.vue
similarity index 95%
rename from packages/progress/src/VProgressBar.vue
rename to packages/ui/src/progress/src/VProgressBar.vue
index 777b57341..33b55c214 100644
--- a/packages/progress/src/VProgressBar.vue
+++ b/packages/ui/src/progress/src/VProgressBar.vue
@@ -1,136 +1,136 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/packages/progress/src/index.ts b/packages/ui/src/progress/src/index.ts
similarity index 100%
rename from packages/progress/src/index.ts
rename to packages/ui/src/progress/src/index.ts
diff --git a/packages/table/src/vue.d.ts b/packages/ui/src/progress/src/vue.d.ts
similarity index 100%
rename from packages/table/src/vue.d.ts
rename to packages/ui/src/progress/src/vue.d.ts
diff --git a/packages/shimmer/tailwind.config.js b/packages/ui/src/progress/tailwind.config.js
similarity index 100%
rename from packages/shimmer/tailwind.config.js
rename to packages/ui/src/progress/tailwind.config.js
diff --git a/packages/switch/tsconfig.json b/packages/ui/src/progress/tsconfig.json
similarity index 100%
rename from packages/switch/tsconfig.json
rename to packages/ui/src/progress/tsconfig.json
diff --git a/packages/progress/vite.config.js b/packages/ui/src/progress/vite.config.js
similarity index 100%
rename from packages/progress/vite.config.js
rename to packages/ui/src/progress/vite.config.js
diff --git a/packages/ui/src/quill-editor.js b/packages/ui/src/quill-editor.js
index f92812ba3..b4ed29385 100644
--- a/packages/ui/src/quill-editor.js
+++ b/packages/ui/src/quill-editor.js
@@ -1 +1 @@
-export * from '@morpheme/quill-editor';
+export * from './quill-editor';
diff --git a/packages/quill-editor/CHANGELOG.md b/packages/ui/src/quill-editor/CHANGELOG.md
similarity index 100%
rename from packages/quill-editor/CHANGELOG.md
rename to packages/ui/src/quill-editor/CHANGELOG.md
diff --git a/packages/quill-editor/README.md b/packages/ui/src/quill-editor/README.md
similarity index 100%
rename from packages/quill-editor/README.md
rename to packages/ui/src/quill-editor/README.md
diff --git a/packages/quill-editor/package.json b/packages/ui/src/quill-editor/package.json
similarity index 100%
rename from packages/quill-editor/package.json
rename to packages/ui/src/quill-editor/package.json
diff --git a/packages/quill-editor/postcss.config.js b/packages/ui/src/quill-editor/postcss.config.js
similarity index 100%
rename from packages/quill-editor/postcss.config.js
rename to packages/ui/src/quill-editor/postcss.config.js
diff --git a/packages/quill-editor/src/Changelog.stories.mdx b/packages/ui/src/quill-editor/src/Changelog.stories.mdx
similarity index 100%
rename from packages/quill-editor/src/Changelog.stories.mdx
rename to packages/ui/src/quill-editor/src/Changelog.stories.mdx
diff --git a/packages/quill-editor/src/Readme.stories.mdx b/packages/ui/src/quill-editor/src/Readme.stories.mdx
similarity index 100%
rename from packages/quill-editor/src/Readme.stories.mdx
rename to packages/ui/src/quill-editor/src/Readme.stories.mdx
diff --git a/packages/quill-editor/src/VQuillEditor.stories.ts b/packages/ui/src/quill-editor/src/VQuillEditor.stories.ts
similarity index 82%
rename from packages/quill-editor/src/VQuillEditor.stories.ts
rename to packages/ui/src/quill-editor/src/VQuillEditor.stories.ts
index 7b5fa5107..38c0ba80e 100644
--- a/packages/quill-editor/src/VQuillEditor.stories.ts
+++ b/packages/ui/src/quill-editor/src/VQuillEditor.stories.ts
@@ -1,9 +1,9 @@
import VQuillEditor from './VQuillEditor.vue';
-import type {Meta, StoryFn} from '@storybook/vue3';
-import {useForm} from 'vee-validate';
-import {object, string} from 'yup';
-import VBtn from '@morpheme/button';
-import {ref} from 'vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { useForm } from 'vee-validate';
+import { object, string } from 'yup';
+import VBtn from '../../button/src';
+import { ref } from 'vue';
export default {
title: 'Forms/QuillEditor',
@@ -14,10 +14,10 @@ export default {
} as Meta