docs: add sample code to plugins (#904)

naver · Dec 13, 2024 · 0ebc9ff · 0ebc9ff
1 parent d607c30
commit 0ebc9ff
Show file tree

Hide file tree

Showing 18 changed files with 378 additions and 146 deletions.
diff --git a/docs/src/component/SourceCode.tsx b/docs/src/component/SourceCode.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
 
 import JavaScriptCode from "./code/JavaScriptCode";
 import ReactCode from "./code/ReactCode";
@@ -15,39 +16,43 @@ import { SourceContext } from "./code/type";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default ({
-  js, react, vue, vue3, angular, preact, svelte,
+  js, react, vue, vue3, angular, preact, svelte, style,
   ...otherProps
-}: SourceContext) => <Tabs
-    groupId="cfc"
-    defaultValue="js"
-    values={[
-      { label: "JavaScript", value: "js" },
-      { label: "React", value: "react" },
-      { label: "Vue@2", value: "vue" },
-      { label: "Vue@3", value: "vue3" },
-      { label: "Angular", value: "angular" },
-      { label: "Preact", value: "preact" },
-      { label: "Svelte", value: "svelte" }
-    ]}>
-    <TabItem value="js">
-      { js ? js : <JavaScriptCode {...otherProps} /> }
-    </TabItem>
-    <TabItem value="react">
-      { react ? react : <ReactCode {...otherProps} /> }
-    </TabItem>
-    <TabItem value="vue">
-      { vue ? vue : <VueCode {...otherProps} /> }
-    </TabItem>
-    <TabItem value="vue3">
-      { vue3 ? vue3 : <Vue3Code {...otherProps} /> }
-    </TabItem>
-    <TabItem value="angular">
-      {angular ? angular : <AngularCode {...otherProps} /> }
-    </TabItem>
-    <TabItem value="preact">
-      {preact ? preact : <PreactCode {...otherProps} /> }
-    </TabItem>
-    <TabItem value="svelte">
-      {svelte ? svelte : <SvelteCode {...otherProps} /> }
-    </TabItem>
-  </Tabs>;
+}: SourceContext) => <div>
+    <Tabs
+      groupId="cfc"
+      defaultValue="js"
+      values={[
+        { label: "JavaScript", value: "js" },
+        { label: "React", value: "react" },
+        { label: "Vue@2", value: "vue" },
+        { label: "Vue@3", value: "vue3" },
+        { label: "Angular", value: "angular" },
+        { label: "Preact", value: "preact" },
+        { label: "Svelte", value: "svelte" }
+      ]}>
+      <TabItem value="js">
+        { js ? js : <JavaScriptCode {...otherProps} /> }
+      </TabItem>
+      <TabItem value="react">
+        { react ? react : <ReactCode {...otherProps} /> }
+      </TabItem>
+      <TabItem value="vue">
+        { vue ? vue : <VueCode {...otherProps} /> }
+      </TabItem>
+      <TabItem value="vue3">
+        { vue3 ? vue3 : <Vue3Code {...otherProps} /> }
+      </TabItem>
+      <TabItem value="angular">
+        {angular ? angular : <AngularCode {...otherProps} /> }
+      </TabItem>
+      <TabItem value="preact">
+        {preact ? preact : <PreactCode {...otherProps} /> }
+      </TabItem>
+      <TabItem value="svelte">
+        {svelte ? svelte : <SvelteCode {...otherProps} /> }
+      </TabItem>
+    </Tabs>
+
+    { style && <CodeBlock className="language-css" title="style">{`${style}`}</CodeBlock> }
+  </div>;
diff --git a/docs/src/component/code/AngularCode.tsx b/docs/src/component/code/AngularCode.tsx
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
 import { SourceContext } from "./type";
 import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils";
 
-export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => {
+export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => {
   const optionsObject = getOptionsObject(options);
   const pluginsDeclaration = plugins
     ? `\n  public plugins: Plugin[] = [${getPlugins(plugins)}];\n`
@@ -33,7 +33,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings
   const eventStatement = Object.keys(events).map(evt => ` (${evt})="${events[evt]}($event)"`).join("");
 
   return <><CodeBlock className="language-html" title="demo.component.html">
-    {`<ngx-flicking${options ? ` [options]="{ ${optionsObject} }"` : ""}${plugins ? " [plugins]=\"plugins\"" : ""}${eventStatement}>
+    {`<ngx-flicking${viewportClass && ` className="${viewportClass}"`}${options ? ` [options]="{ ${optionsObject} }"` : ""}${plugins ? " [plugins]=\"plugins\"" : ""}${eventStatement}>
   ${panels.map(panel => `<${panel.tag} ${panel.isSlot ? "in-viewport" : "flicking-panel"}${getClass(panel)}${getStyle(panel)}>${panel.content}</${panel.tag}>`).join("\n  ")}
 </ngx-flicking>${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}</${el.tag}>`).join("\n")}` : ""}`}
   </CodeBlock>

diff --git a/docs/src/component/code/JavaScriptCode.tsx b/docs/src/component/code/JavaScriptCode.tsx
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
 import { SourceContext } from "./type";
 import { getClass, getImports, getStyle, withQuoteIfString } from "./utils";
 
-export default ({ options, panels, events = {}, methods = {}, plugins = [], siblings = [], imports = [] }: SourceContext) => {
+export default ({ options, panels, events = {}, methods = {}, plugins = [], siblings = [], imports = [], viewportClass="" }: SourceContext) => {
   const getOptions = (opts: { [key: string]: any }) => `${Object.keys(opts).map(key => `${key}: ${withQuoteIfString(opts[key])}`).join(",\n  ")}`;
 
   const declareVars = Object.keys(methods).map(name => `const ${name} = ${methods[name]};\n`).join("");
@@ -16,7 +16,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins = [], sibl
     : "const flicking = new Flicking(\"#flick\")";
 
   const addPlugins = plugins.length > 0
-    ? `flicking.addPlugins(${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{\n  ${getOptions(plugin[1])}\n}` : ""})`)});` : "";
+    ? `flicking.addPlugins(${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{\n  ${typeof plugin[1] === "object" ? getOptions(plugin[1]) : plugin[1] ?? ""}\n}` : ""})`)});` : "";
   const allImports = [...plugins.map(plugin => [`{ ${plugin[0]} }`, "@egjs/flicking-plugins"]), ...imports];
   const addEvents = Object.keys(events).map(evt => {
     const callback = events[evt];
@@ -26,7 +26,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins = [], sibl
   const slots = panels.filter(panel => panel.isSlot);
 
   return <><CodeBlock className="language-html" title="html">
-    {`<div id="flick" class="flicking-viewport${options.horizontal === false ? " vertical" : "" }">
+    {`<div id="flick" class="flicking-viewport${viewportClass && ` ${viewportClass}` }${options.horizontal === false ? " vertical" : "" }">
   <div class="flicking-camera">
     ${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel)}${getStyle(panel)}>${panel.content}</${panel.tag}>`).join("\n    ")}
   </div>${slots.length ? `\n  ${slots.map(slot => `<${slot.tag}${getClass(slot)}${getStyle(slot)}>${slot.content}</${slot.tag}>`).join("\n  ")}` : ""}

diff --git a/docs/src/component/code/PreactCode.tsx b/docs/src/component/code/PreactCode.tsx
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
 import { SourceContext } from "./type";
 import { getClass, getImports, getPlugins, getStyle } from "./utils";
 
-export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => {
+export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => {
   const declarePlugins = plugins ? `\n  private _plugins = [${getPlugins(plugins)}];\n` : "";
   const slots = panels.filter(panel => panel.isSlot);
 
@@ -35,7 +35,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings,
 ${declareVars}
 export default class DemoComponent extends Component {${declarePlugins}
   public render() {
-    return ${siblings ? "<>\n    " : ""}<Flicking${options ? ` ${Object.keys(options).map(key => `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}>
+    return ${siblings ? "<>\n    " : ""}<Flicking${viewportClass && ` className="${viewportClass}"`}${options ? ` ${Object.keys(options).map(key => `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}>
       ${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel, "className")}${getStyle(panel, true)}>${panel.content.replace(/class/g, "className")}</${panel.tag}>`).join("\n      ")}${slotsTemplate}
     </Flicking>${siblings ? `\n    ${siblings.map(el => `<${el.tag}${getClass(el, "className")}${getStyle(el, true)}>${el.content.replace(/class/g, "className")}</${el.tag}>`).join("\n    ")}\n    </>` : ""};
   }

diff --git a/docs/src/component/code/ReactCode.tsx b/docs/src/component/code/ReactCode.tsx
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
 import { SourceContext } from "./type";
 import { getClass, getImports, getPlugins, getStyle } from "./utils";
 
-export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => {
+export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => {
   const declarePlugins = plugins ? `\n  private _plugins = [${getPlugins(plugins)}];\n` : "";
   const slots = panels.filter(panel => panel.isSlot);
 
@@ -35,7 +35,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings,
 ${declareVars}
 export default class DemoComponent extends Component {${declarePlugins}
   public render() {
-    return ${siblings ? "<>\n    " : ""}<Flicking${options ? ` ${Object.keys(options).map(key => `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}>
+    return ${siblings ? "<>\n    " : ""}<Flicking${viewportClass && ` className="${viewportClass}"`}${options ? ` ${Object.keys(options).map(key => `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}>
       ${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel, "className")}${getStyle(panel, true)}>${panel.content.replace(/class/g, "className")}</${panel.tag}>`).join("\n      ")}${slotsTemplate}
     </Flicking>${siblings ? `\n    ${siblings.map(el => `<${el.tag}${getClass(el, "className")}${getStyle(el, true)}>${el.content.replace(/class/g, "className")}</${el.tag}>`).join("\n    ")}\n    </>` : ""};
   }

diff --git a/docs/src/component/code/SvelteCode.tsx b/docs/src/component/code/SvelteCode.tsx
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
 import { SourceContext } from "./type";
 import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils";
 
-export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => {
+export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => {
   const optionsObject = getOptionsObject(options);
   const declarePlugins = plugins ? `\n\nconst plugins = [${getPlugins(plugins)}];` : "";
   const slots = panels.filter(panel => panel.isSlot);
@@ -34,7 +34,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings,
 ${getImports(defaultImports, { includeFlicking: false })}${declarePlugins}${declareMethods}
 </script>
 
-<Flicking${options ? ` options={{ ${optionsObject} }}` : ""}${plugins ? " plugins={plugins}" : ""}${eventStatement}>
+<Flicking${viewportClass && ` class="${viewportClass}"`}${options ? ` options={{ ${optionsObject} }}` : ""}${plugins ? " plugins={plugins}" : ""}${eventStatement}>
   ${panels.filter(panel => !panel.isSlot).map(panel => `<FlickingPanel${getClass(panel)}${getStyle(panel)}>${panel.content}</FlickingPanel>`).join("\n  ")}${slotsTemplate}
 </Flicking>${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}</${el.tag}>`).join("\n")}` : ""}`}
   </CodeBlock>;

diff --git a/docs/src/component/code/Vue3Code.tsx b/docs/src/component/code/Vue3Code.tsx
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
 import { SourceContext } from "./type";
 import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils";
 
-export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => {
+export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => {
   const optionsObject = getOptionsObject(options);
   const slots = panels.filter(panel => panel.isSlot);
   const declarePlugins = plugins ? `,
@@ -31,7 +31,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings
   const eventStatement = Object.keys(events).map(evt => ` @${evt.replace(/([A-Z])/g, "-$1").toLowerCase()}="${events[evt]}"`).join("");
 
   return <><CodeBlock className="language-html" title="template">
-    {`<Flicking${options ? ` :options="{ ${optionsObject} }"` : ""}${plugins ? " :plugins=\"plugins\"" : ""}${eventStatement}>
+    {`<Flicking${viewportClass && ` class="${viewportClass}"`}${options ? ` :options="{ ${optionsObject} }"` : ""}${plugins ? " :plugins=\"plugins\"" : ""}${eventStatement}>
   ${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel)}${getStyle(panel)}>${panel.content}</${panel.tag}>`).join("\n  ")}${slotsTemplate}
 </Flicking>${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}</${el.tag}>`).join("\n")}` : ""}`}
   </CodeBlock>

diff --git a/docs/src/component/code/VueCode.tsx b/docs/src/component/code/VueCode.tsx
@@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock";
 import { SourceContext } from "./type";
 import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils";
 
-export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => {
+export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => {
   const optionsObject = getOptionsObject(options);
   const declarePlugins = plugins ? `,
   data() {
@@ -23,7 +23,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings
   const eventStatement = Object.keys(events).map(evt => ` @${evt.replace(/([A-Z])/g, "-$1").toLowerCase()}="${events[evt]}"`).join("");
 
   return <><CodeBlock className="language-html" title="template">
-    {`<Flicking${options ? ` :options="{ ${optionsObject} }"` : ""}${plugins ? " :plugins=\"plugins\"" : ""}${eventStatement}>
+    {`<Flicking${viewportClass && ` class="${viewportClass}"`}${options ? ` :options="{ ${optionsObject} }"` : ""}${plugins ? " :plugins=\"plugins\"" : ""}${eventStatement}>
   ${panels.map(panel => `<${panel.tag}${panel.isSlot ? " slot=\"viewport\"" : ""}${getClass(panel)}${getStyle(panel)}>${panel.content}</${panel.tag}>`).join("\n  ")}
 </Flicking>${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}</${el.tag}>`).join("\n")}` : ""}`}
   </CodeBlock>

diff --git a/docs/src/component/code/type.ts b/docs/src/component/code/type.ts
@@ -13,6 +13,8 @@ export interface SourceContext {
   angular?: React.ReactElement;
   preact?: React.ReactElement;
   svelte?: React.ReactElement;
+  viewportClass?: string;
+  style?: string;
 }
 
 export interface InnerElement {

diff --git a/docs/src/component/code/utils.ts b/docs/src/component/code/utils.ts
@@ -25,4 +25,4 @@ export const getImports = (otherImports, {
 
   return `${imports.map(imp => Array.isArray(imp) ? `import ${imp[0]} from "${imp[1]}";` : `import "${imp}";`).join("\n")}`;
 };
-export const getPlugins = (plugins) => `${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{ ${getOptionsObject(plugin[1])} }` : ""}`).join(", ")})`;
+export const getPlugins = (plugins) => `${plugins.map(plugin => `new ${plugin[0]}(${typeof plugin[1] === "object" ? `{ ${getOptionsObject(plugin[1])} }` : plugin[1] ?? ""}`).join(", ")})`;
diff --git a/docs/src/css/demo/plugins.css b/docs/src/css/demo/plugins.css
@@ -1,13 +1,9 @@
 .plugins-panel {
   position: relative;
-  display: block;
   border-radius: 5px;
   width: 80%;
   margin-right: 10px;
-  background: #f55;
   height: 200px;
-  text-align: center;
-  line-height: 200px;
   overflow: hidden;
 }
 .plugins-panel:after {

diff --git a/docs/src/demo/plugins/Arrow.tsx b/docs/src/demo/plugins/Arrow.tsx
@@ -34,13 +34,53 @@ export default () => {
       </Flicking>
     </div>
 
-    <SourceCode options={{ circular: true }} panels={[
-      { tag: "div", class: "card-panel", content: "1" },
-      { tag: "div", class: "card-panel", content: "2" },
-      { tag: "div", class: "card-panel", content: "3" },
-      { tag: "span", class: "flicking-arrow-prev", content: "", isSlot: true },
-      { tag: "span", class: "flicking-arrow-next", content: "", isSlot: true }
-    ]} plugins={[["Arrow"]]} imports={["@egjs/flicking-plugins/dist/arrow.css"]} />
+    <SourceCode
+      options={{ circular: true }}
+      panels={[
+        { tag: "div", class: "card-panel", content: `<span class="flicking-index">1</span>` },
+        { tag: "div", class: "card-panel", content: `<span class="flicking-index">2</span>` },
+        { tag: "div", class: "card-panel", content: `<span class="flicking-index">3</span>` },
+        { tag: "span", class: "flicking-arrow-prev", content: "", isSlot: true },
+        { tag: "span", class: "flicking-arrow-next", content: "", isSlot: true }
+      ]}
+      plugins={[["Arrow"]]}
+      imports={["@egjs/flicking-plugins/dist/arrow.css"]}
+      style={`.card-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1);
+  max-width: 100%;
+  font-size: 3rem;
+  margin: 0.5rem;
+  width: 50%;
+  height: 200px;
+  padding: 30px 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.flicking-index {
+  position: relative;
+  min-width: 60px;
+  text-align: center;
+}
+
+.flicking-index::after {
+  position: absolute;
+  content: "PANEL";
+  font-weight: bold;
+  left: 0;
+  bottom: -1.2rem;
+  width: 100%;
+  text-align: center;
+  font-size: 1rem;
+}
+`}/>
 
     <div id="arrow-2" className="relative-container">
       <Flicking className="mb-6" plugins={plugins2} circular={true}>
@@ -55,9 +95,9 @@ export default () => {
     </div>
 
     <SourceCode options={{ circular: true }} panels={[
-      { tag: "div", class: "card-panel", content: "1" },
-      { tag: "div", class: "card-panel", content: "2" },
-      { tag: "div", class: "card-panel", content: "3" },
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">1</span>` },
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">2</span>` },
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">3</span>` },
       { tag: "span", class: "flicking-arrow-prev is-circle", content: "", isSlot: true },
       { tag: "span", class: "flicking-arrow-next is-circle", content: "", isSlot: true }
     ]} plugins={[["Arrow"]]} imports={["@egjs/flicking-plugins/dist/arrow.css"]} />
@@ -73,9 +113,9 @@ export default () => {
     </div>
 
     <SourceCode options={{ circular: true }} panels={[
-      { tag: "div", class: "card-panel", content: "1" },
-      { tag: "div", class: "card-panel", content: "2" },
-      { tag: "div", class: "card-panel", content: "3" }
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">1</span>` },
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">2</span>` },
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">3</span>` },
     ]} siblings={[
       { tag: "span", class: "flicking-arrow-prev is-outside", content: "" },
       { tag: "span", class: "flicking-arrow-next is-outside", content: "" }
@@ -93,9 +133,9 @@ export default () => {
     </div>
 
     <SourceCode options={{ circular: true }} panels={[
-      { tag: "div", class: "card-panel", content: "1" },
-      { tag: "div", class: "card-panel", content: "2" },
-      { tag: "div", class: "card-panel", content: "3" }
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">1</span>` },
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">2</span>` },
+      { tag: "div", class: "card-panel", content: `<span class="flicking-index">3</span>` },
     ]} siblings={[
       { tag: "span", class: "flicking-arrow-prev is-thin", content: "" },
       { tag: "span", class: "flicking-arrow-next is-thin", content: "" }