add nucleus-vue

livresaber · Oct 24, 2024 · 12512fd · 12512fd
1 parent d07405e
commit 12512fd
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 202 deletions.
diff --git a/README.md b/README.md
@@ -4,8 +4,6 @@ A component darkmode injection in your document page with vue.js
 
 <a href="https://darkmode-vue.web.app" target="_blank">Live Preview</a>
 
-<img alt="A component darkmode screenshot using in a application real" width="100%" src="https://raw.githubusercontent.com/livresaber/darkmode-vue/master/public/screen-darkmode-vue.png" />
-
 Install
 ```js
 npm install --save darkmode-vue

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "darkmode-vue": "0.4.0",
-    "vue": "^3.5.12",
-    "vue-techs-logos": "^0.1.24"
+    "nucleus-vue": "^0.0.5",
+    "vue": "^3.5.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",

diff --git a/public/screen-darkmode-vue.png b/public/screen-darkmode-vue.png
diff --git a/src/App.config.ts b/src/App.config.ts
@@ -0,0 +1,25 @@
+import pkg from '../package.json';
+const appVersion = pkg.version;
+const vueVersion = pkg.dependencies.vue.replace('^', '');
+
+export const configApp = {
+  name: 'darkmode-vue',
+  npm: 'https://www.npmjs.com/package/darkmode-vue',
+  github: 'https://github.com/livresaber/darkmode-vue',
+  appVersion,
+  vueVersion,
+  stepsInstall: [
+    {
+      name: 'Install',
+      language: 'bash',
+      content: 'npm install darkmode-vue',
+    },
+    {
+      name: 'Usage',
+      language: 'tsx',
+      content: `import DarkModeVue from 'darkmode-vue'
+
+<DarkModeVue />`,
+    },
+  ],
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,65 +1,41 @@
 <script setup>
-import pkg from '../package.json';
-import DarkModeVue, { useDarkModeVue } from 'darkmode-vue';
-import CodeComponent from './components/CodeComponent.vue';
+import Nucleus, { NucleusCode } from 'nucleus-vue';
+import DarkModeVue, { useDarkModeVue } from './main-darkmode';
+import { configApp } from './App.config';
 
-const appVersion = pkg.version;
 const { mode, toggleMode } = useDarkModeVue()
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="200" height="200" />
-    <h1><a href='https://github.com/livresaber/darkmode-vue' target='_blank'>darkmode-vue@{{ appVersion }}</a></h1>
-  </header>
-  <main>
-    <h2>Install</h2>
-    <CodeComponent>
-      npm install darkmode-vue
-    </CodeComponent>
-
-    <h2>Usage</h2>
-    <CodeComponent>
-      import DarkModeVue from 'darkmode-vue'
-      <br>
-      {{`<DarkModeVue />`}}
-    </CodeComponent>
-    <CodeComponent :disableCopy="true">
-      <DarkModeVue />
-    </CodeComponent>
-
+  <Nucleus :config="configApp">
+  <div class="content example">
     <h2>Prop hiddenLabel</h2>
-    <CodeComponent>
+    <NucleusCode language="tsx">
       {{`<DarkModeVue :hiddenLabel="true" />`}}
-    </CodeComponent>
-    <CodeComponent :disableCopy="true">
-      <DarkModeVue :hiddenLabel="true" />
-    </CodeComponent>
+    </NucleusCode>
+    <DarkModeVue :hiddenLabel="true" />
 
     <h2>Prop hiddenIcon</h2>
-    <CodeComponent>
+    <NucleusCode language="tsx">
       {{`<DarkModeVue :hiddenIcon="true" />`}}
-    </CodeComponent>
-    <CodeComponent :disableCopy="true">
-      <DarkModeVue :hiddenIcon="true" />
-    </CodeComponent>
+    </NucleusCode>
+    <DarkModeVue :hiddenIcon="true" />
 
     <h2>Prop labelDark and labelLight</h2>
-    <CodeComponent>
+    <NucleusCode language="tsx">
       {{`<DarkModeVue
   labelDark="Tema escuro"
   labelLight="Tema claro"
 />`}}
-    </CodeComponent>
-    <CodeComponent :disableCopy="true">
-      <DarkModeVue
-        labelDark="Tema escuro"
-        labelLight="Tema claro"
-      />
-    </CodeComponent>
-
+    </NucleusCode>
+    <DarkModeVue
+      labelDark="Tema escuro"
+      labelLight="Tema claro"
+    />
+  </div>
+  <div class="content example">
     <h2>Slot change icon and label custom</h2>
-    <CodeComponent>
+    <NucleusCode language="tsx">
       {{`<DarkModeVue>
   <template #iconDark>
     <svg></svg>
@@ -74,26 +50,25 @@ const { mode, toggleMode } = useDarkModeVue()
     On
   </template>
 </DarkModeVue>`}}
-    </CodeComponent>
-    <CodeComponent :disableCopy="true">
-      <DarkModeVue>
-        <template #iconDark>
-          <svg viewBox="0 0 24 24" width="30"><path fill="currentColor" d="M12,2C9.76,2 7.78,3.05 6.5,4.68L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z"></path></svg>
-        </template>
-        <template #iconLight>
-          <svg viewBox="0 0 24 24" width="30"><path fill="currentColor" d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z"></path></svg>
-        </template>
-        <template #labelDark>
-          Off
-        </template>
-        <template #labelLight>
-          On
-        </template>
-      </DarkModeVue>
-    </CodeComponent>
-
+    </NucleusCode>
+    <DarkModeVue>
+      <template #iconDark>
+        <svg viewBox="0 0 24 24" width="30"><path fill="currentColor" d="M12,2C9.76,2 7.78,3.05 6.5,4.68L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z"></path></svg>
+      </template>
+      <template #iconLight>
+        <svg viewBox="0 0 24 24" width="30"><path fill="currentColor" d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z"></path></svg>
+      </template>
+      <template #labelDark>
+        Off
+      </template>
+      <template #labelLight>
+        On
+      </template>
+    </DarkModeVue>
+  </div>
+  <div class="content example">
     <h2>Style modification and usage in your styles</h2>
-    <CodeComponent>
+    <NucleusCode language="css">
       {{`body {
   --dm-color-primary: #41b883;
   --dm-color-secondary: #34495e;
@@ -105,18 +80,19 @@ body.darkmode {
   --dm-color-text: #fff;
   --dm-color-background: #222;
 }`}}
-    </CodeComponent>
+    </NucleusCode>
     <p>Create your variable colors and update this with class .darkmode.</p>
-
+  </div>
+  <div class="content example">
     <h2>Usage useDarkModeVue with toggleMode and mode value</h2>
-    <CodeComponent>
+    <NucleusCode language="tsx">
       {{`import { useDarkModeVue } from 'darkmode-vue';
 
 const { mode, toggleMode } = useDarkModeVue();
 
 <button @click="toggleMode">DarkModeVue \{\{ mode \}\}</button>
 `}}
-    </CodeComponent>
+    </NucleusCode>
 
     <button class="btn-custom" @click="toggleMode">DarkModeVue {{ mode }}</button>
 
@@ -125,47 +101,26 @@ const { mode, toggleMode } = useDarkModeVue();
     <p>In LocalStorage is created a key store with value current mode.</p>
     <p>Do you usage children body.darkmode styles for your application.</p>
     <p>I recommend create a variables colors in css and update this with toggle class of body document.</p>
-  </main>
-  <footer>
-    <a href='https://github.com/livresaber/darkmode-vue' target='_blank'>Version {{appVersion}} @LivreSaber</a>
-  </footer>
+  </div>
+  </Nucleus>
 </template>
 
-<style scoped>
-
+<style>
+.btn-mode.hiddenLabel.darkmode-button {
+  display: none;
+}
 .btn-custom {
   width: 200px;
   padding: 1rem;
   margin: 2rem auto 0;
 }
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-h2, h3 {
-  margin-top: 2rem;
-}
-
-header {
+.example {
   display: flex;
-  place-items: center;
   flex-direction: column;
-  padding: 1rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
-
-main {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-main h1 {
-  margin-bottom: 1rem;
-}
-
-footer {
-  margin-top: 2rem;
-  padding: 2rem;
+.example button {
+  margin: 1rem 0;
 }
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
diff --git a/src/components/CodeComponent.spec.js b/src/components/CodeComponent.spec.js
diff --git a/src/components/CodeComponent.vue b/src/components/CodeComponent.vue
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,4 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import './assets/main.css'
-
 const app = createApp(App).mount('#app')