vanilla-vue-ui 0.0.3 → 0.0.5

package/basic/container/WContainer.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+      <slot />
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "type": "module",
   "files": [
@@ -9,7 +9,8 @@
     "custom",
     "icon",
     "types",
-    "util"
+    "util",
+    "page-template"
   ],
   "scripts": {
     "dev": "vite",
@@ -28,7 +29,8 @@
     "copy-icon": "copyfiles -u 1 src/icon/**/* .",
     "copy-types": "copyfiles -u 1 src/types/**/* .",
     "copy-util": "copyfiles -u 1 src/util/**/* .",
-    "copy": "npm run copy-template && npm run copy-basic && npm run copy-custom && npm run copy-icon && npm run copy-types && npm run copy-util"
+    "copy-page-template": "copyfiles -u 1 src/page-template/**/* .",
+    "copy": "npm run copy-template && npm run copy-basic && npm run copy-custom && npm run copy-icon && npm run copy-types && npm run copy-util && npm run copy-page-template"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.17",

package/page-template/app-template/WAppTemplate.vue

@@ -0,0 +1,24 @@
+<template>
+  <slot name="header"></slot>
+
+  <w-container>
+    <main>
+      <w-spacer-island>
+        <slot name="title"></slot>
+      </w-spacer-island>
+
+      <slot></slot>
+    </main>
+
+    <w-spacer-island>
+      <slot name="bottom"></slot>
+    </w-spacer-island>
+  </w-container>
+
+  <slot name="footer"></slot>
+</template>
+
+<script setup lang="ts">
+import WContainer from '@/basic/container/WContainer.vue';
+import WSpacerIsland from '../../template/spacer-island/WSpacerIsland.vue'
+</script>

package/page-template/article-template/WArticleTemplate.vue

@@ -0,0 +1,11 @@
+<template>
+  <slot name="header"></slot>
+
+  <main>
+    <article>
+      <slot></slot>
+    </article>
+  </main>
+
+  <slot name="footer"></slot>
+</template>

package/page-template/dashboard-template/WDashboardTemplate.stories.ts

@@ -0,0 +1,62 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import DashboardTemplate from './WDashboardTemplate.vue';
+import { HomeIcon } from '@heroicons/vue/24/outline'
+
+type DashboardTemplateProps = InstanceType<typeof DashboardTemplate>['$props']
+
+const meta: Meta<typeof DashboardTemplate> = {
+  component: DashboardTemplate,
+};
+
+export default meta;
+type Story = StoryObj<typeof DashboardTemplate>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (args: DashboardTemplateProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { DashboardTemplate },
+    template: `
+      <DashboardTemplate :navigationTop="navigationTop">
+        <div class="prose">
+          <h1>Menu</h1>
+        </div>
+      </DashboardTemplate>
+    `,
+  }),
+  args: {
+    navigationTop: [{ name: 'メニュー', href: '/ja', onClick: undefined, icon: HomeIcon, current: false }]
+  }
+};
+
+export const WithBottom: Story = {
+  render: (args: DashboardTemplateProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { DashboardTemplate },
+    template: `
+      <DashboardTemplate :title="title" :navigationTop="navigationTop" :navigationBottom="navigationBottom">
+        <div class="prose">
+          <h1>Menu</h1>
+        </div>
+      </DashboardTemplate>
+    `,
+  }),
+  args: {
+    title: '管理ページ',
+    navigationTop: [{ name: 'メニュー', href: '/ja', onClick: undefined, icon: HomeIcon, current: false }],
+    navigationBottom: [{ name: 'ログアウト', href: undefined, onClick: () => console.log('ログアウトボタンが押されました。'), icon: undefined, current: undefined }]
+  }
+};

package/page-template/dashboard-template/WDashboardTemplate.vue

@@ -0,0 +1,51 @@
+<template>
+  <NavigationDrawer
+    :title="props.title"
+    :navigation-top="navigationTop"
+    :navigation-bottom="navigationBottom"
+  >
+    <Banner />
+
+    <div class="mt-4 lg:mt-8 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-3xl">
+        <Breadcrumb />
+
+        <div class="mt-4 lg:mt-10">
+          <slot />
+        </div>
+      </div>
+    </div>
+
+    <FooterSimple :text="props.footerText" />
+  </NavigationDrawer>
+</template>
+
+<script setup lang="ts">
+import type { NavigationDrawerContent } from '../../template/navigation-drawer/NavigationDrawerContent'
+import NavigationDrawer from '../../template/navigation-drawer/NavigationDrawer.vue'
+import FooterSimple from '../../template/footer-simple/WFooterSimple.vue'
+import Breadcrumb from '../../basic/breadcrumb/WBreadcrumb.vue'
+import Banner from '../../basic/banner/WBanner.vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String as PropType<string>,
+    default: "Dashboard"
+  },
+  navigationTop: {
+    type: Array as PropType<NavigationDrawerContent[]>,
+    required: true
+  },
+  navigationBottom: {
+    type: Array as PropType<NavigationDrawerContent[]>,
+    required: false,
+    default: []
+  },
+  footerText: {
+    type: String as PropType<string>,
+    required: false,
+    default: `© 2020 Your Company, Inc. All rights reserved.`
+  }
+})
+</script>

package/template/spacer-island/WSpacerIsland.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import SpacerIsland from './WSpacerIsland.vue';
+
+const meta: Meta<typeof SpacerIsland> = {
+  component: SpacerIsland,
+};
+
+export default meta;
+type Story = StoryObj<typeof SpacerIsland>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { SpacerIsland },
+    template: '<SpacerIsland><p>content</p></SpacerIsland>',
+  }),
+};

package/template/spacer-island/WSpacerIsland.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="classes.base">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClassObject } from '../../types/ClassObject';
+import { defineProps, type PropType } from 'vue';
+
+defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+    default() {
+      return {
+        base: 'my-4 md:my-6 lg:my-10 xl:my-16'
+      }
+    }
+  }
+})
+</script>

package/template/spacer-ladder/WSpacerLadder.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import SpacerLadder from './WSpacerLadder.vue';
+
+const meta: Meta<typeof SpacerLadder> = {
+  component: SpacerLadder,
+};
+
+export default meta;
+type Story = StoryObj<typeof SpacerLadder>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { SpacerLadder },
+    template: '<SpacerLadder><p>content</p></SpacerLadder>',
+  }),
+};

package/template/spacer-ladder/WSpacerLadder.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="classes.base">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClassObject } from '../../types/ClassObject';
+import { defineProps, type PropType } from 'vue';
+
+defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+    default() {
+      return {
+        base: 'my-2 md:my-4'
+      }
+    }
+  }
+})
+</script>

package/template/spacer-wrap/WSpacerWrap.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import SpacerWrap from './WSpacerWrap.vue';
+
+const meta: Meta<typeof SpacerWrap> = {
+  component: SpacerWrap,
+};
+
+export default meta;
+type Story = StoryObj<typeof SpacerWrap>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    components: { SpacerWrap },
+    template: '<SpacerWrap><p>content</p></SpacerWrap>',
+  }),
+};

package/template/spacer-wrap/WSpacerWrap.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="classes.base">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClassObject } from '../../types/ClassObject';
+import { defineProps, type PropType } from 'vue';
+
+defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+    default() {
+      return {
+        base: 'm-1 p-1'
+      }
+    }
+  }
+})
+</script>