@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/StyleSetting.vue

@@ -1,177 +1,264 @@
 <template>
 	<div :class="$style.comp">
 
-    <div v-for="(_, index) in viewTypes"
-         v-show="_.value === viewType">
-      <div class="flex flex-col gap-8">
+    <div class="flex flex-col divide-y divide-border-50">
 
-        <div>
-
-          <div class="flex flex-row gap-4 items-center cursor-pointer">
-            <strong class="flex-1 text-text-400">All</strong>
-          </div>
-
-          <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
-
-          <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-4 p-6">
 
-            <div>
-              <label :class="$style.label">Font Family</label>
-              <Dropdown v-model="mediaOf(_.value, '*')['font-family']" class="mt-1">
-                <option value="">Default</option>
-                <option v-for="opt in components.fontFamily"
-                        :value="`${opt[1]}`">
-                  {{ opt[0] }}
-                </option>
-              </Dropdown>
-            </div>
+        <div>
+          <small class="text-text-400">Font Family</small>
+          <Dropdown v-model="mediaOf(viewType, '*')['font-family']" class="mt-1">
+            <option value="">Default</option>
+            <option v-for="opt in components.fontFamily"
+                    :value="`${opt[1]}`">
+              {{ opt[0] }}
+            </option>
+          </Dropdown>
+        </div>
 
-            <div>
-              <label :class="$style.label">Font Size</label>
-              <Dropdown v-model="mediaOf(_.value, 'html, .html')['font-size']" class="mt-1">
-                <option value="">Default</option>
-                <option v-for="opt in components.fontSize"
-                        :value="`${opt[1]}`">
-                  {{ opt[0] }}
-                </option>
-              </Dropdown>
-            </div>
+        <div>
+          <small class="text-text-400">Font Size</small>
+          <Dropdown v-model="mediaOf(viewType, 'html, .html')['font-size']" class="mt-1">
+            <option value="">Default</option>
+            <option v-for="opt in components.fontSize"
+                    :value="`${opt[1]}`">
+              {{ opt[0] }}
+            </option>
+          </Dropdown>
+        </div>
 
-            <div>
-              <label :class="$style.label">Primary Color</label>
-              <div class="mt-1 grid grid-cols-8 gap-4">
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-100']"
+        <div>
+          <label :class="$style.label">Primary Color</label>
+          <div class="mt-1 flex flex-row items-center gap-4">
+            <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary']" item-class="w-[48px] h-[48px]"
+                         mode="hex" :custom-color="true" value-type="rgb"
+                         @change="generateShade('--primary', mediaOf(viewType, 'html, .html')['--primary'])" />
+
+            <div class="grid grid-cols-5 gap-2 text-center">
+              <div>
+                <small class="text-xs text-text-400">400</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-400']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-200']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">300</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-300']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-300']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">200</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-200']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-400']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">100</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-100']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-500']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">50</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-50']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-600']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">600</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-600']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-700']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">700</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-700']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-800']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">800</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-800']"
+                             mode="hex" :custom-color="true" value-type="rgb" />
+              </div>
+              <div>
+                <small class="text-xs text-text-400">900</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--primary-900']"
                              mode="hex" :custom-color="true" value-type="rgb" />
               </div>
             </div>
+          </div>
+        </div>
 
-            <div>
-              <label :class="$style.label">Secondary Color</label>
-              <div class="mt-1 grid grid-cols-8 gap-4">
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-100']"
+        <div>
+          <label :class="$style.label">Secondary Color</label>
+          <div class="mt-1 flex flex-row items-center gap-4">
+            <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary']" item-class="w-[48px] h-[48px]"
+                         mode="hex" :custom-color="true" value-type="rgb"
+                         @change="generateShade('--secondary', mediaOf(viewType, 'html, .html')['--secondary'])" />
+
+            <div class="grid grid-cols-5 gap-2 text-center">
+              <div>
+                <small class="text-xs text-text-400">400</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-400']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-200']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">300</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-300']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-300']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">200</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-200']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-400']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">100</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-100']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-500']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">50</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-50']"
+                             mode="hex" :custom-color="true" value-type="rgb" />
+              </div>
+              <div>
+                <small class="text-xs text-text-400">600</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-600']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-600']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">700</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-700']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-700']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">800</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-800']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-800']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">900</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--secondary-900']"
                              mode="hex" :custom-color="true" value-type="rgb" />
               </div>
             </div>
+          </div>
+        </div>
 
-            <div>
-              <label :class="$style.label">Text Color</label>
-              <div class="mt-1 grid grid-cols-8 gap-4">
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-100']"
+        <div>
+          <label :class="$style.label">Text Color</label>
+          <div class="mt-1 flex flex-row items-center gap-4">
+            <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text']" item-class="w-[48px] h-[48px]"
+                         mode="hex" :custom-color="true" value-type="rgb"
+                         @change="generateShade('--text', mediaOf(viewType, 'html, .html')['--text'])" />
+
+            <div class="grid grid-cols-5 gap-2 text-center">
+              <div>
+                <small class="text-xs text-text-400">400</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-400']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-200']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">300</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-300']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-300']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">200</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-200']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-400']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">100</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-100']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-500']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">50</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-50']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-600']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">600</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-600']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-700']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">700</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-700']"
                              mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-800']"
+              </div>
+              <div>
+                <small class="text-xs text-text-400">800</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-800']"
+                             mode="hex" :custom-color="true" value-type="rgb" />
+              </div>
+              <div>
+                <small class="text-xs text-text-400">900</small>
+                <ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-900']"
                              mode="hex" :custom-color="true" value-type="rgb" />
               </div>
             </div>
-
           </div>
-
-
         </div>
 
-        <div>
-
-          <div class="flex flex-row gap-4 items-center cursor-pointer">
-            <strong class="flex-1 text-text-400">Headings</strong>
-          </div>
+      </div>
 
-          <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+      <div class="p-6">
 
-          <div class="flex flex-col gap-4">
+        <small class="flex-1 text-text-400">Headings</small>
 
-            <div>
-              <label :class="$style.label">Font Family</label>
-              <Dropdown v-model="mediaOf(_.value, 'h1, h2, h3, h4, h5')['font-family']" class="mt-1">
-                <option value="">Default</option>
-                <option v-for="opt in components.fontFamily"
-                        :value="`${opt[1]}`">
-                  {{ opt[0] }}
-                </option>
-              </Dropdown>
-            </div>
+        <div class="flex flex-col gap-4 mt-2">
 
+          <div>
+            <small class="text-text-400">Font Family</small>
+            <Dropdown v-model="mediaOf(viewType, 'h1, h2, h3, h4, h5')['font-family']" class="mt-1">
+              <option value="">Default</option>
+              <option v-for="opt in components.fontFamily"
+                      :value="`${opt[1]}`">
+                {{ opt[0] }}
+              </option>
+            </Dropdown>
           </div>
-        </div>
 
+        </div>
       </div>
-    </div>
 
-    <div>
+      <div class="p-6">
+
+        <small class="text-text-400">Splash</small>
+
+        <div class="mt-1 flex flex-col items-center gap-2">
+          <Image ref="splashImg"
+                 :src="item.props.splash"
+                 :editable="true"
+                 @change="setSplash"
+                 class="aspect-square bg-text-50 rounded-lg w-[100px]" />
+
+          <div class="flex flex-row gap-8">
+            <button type="button" class="text-primary"
+                    @click="$refs.splashImg.edit()">
+              Upload
+            </button>
+            <button type="button" class="text-primary"
+                    @click="removeSplash">
+              Remove
+            </button>
+          </div>
+        </div>
 
-      <div class="flex flex-row gap-4 items-center cursor-pointer">
-        <strong class="flex-1 text-text-400">Splash</strong>
       </div>
 
-      <div class="mt-1 flex flex-col items-center gap-2">
-        <Image ref="splashImg"
-               :src="item.props.splash"
-               :editable="true"
-               @change="setSplash"
-               class="aspect-square bg-text-50 rounded-lg w-[100px]" />
-
-        <div class="flex flex-row gap-8">
-          <button type="button" class="text-primary"
-                  @click="$refs.splashImg.edit()">
-            Upload
-          </button>
-          <button type="button" class="text-primary"
-                  @click="removeSplash">
-            Remove
-          </button>
-        </div>
+      <div class="p-6 text-center">
+        <br />
+        <button type="button" class="text-text-300 hover:text-primary" @click="resetMedia">Reset</button>
       </div>
 
     </div>
 
-    <div class="p-6 text-center">
-      <button type="button" class="text-primary" @click="resetMedia">Reset to Default Style</button>
-    </div>
-
 	</div>
 </template>
 
 <script>
 
 import ColorPicker from "../components/ColorPicker.vue";
+import tinycolor from "tinycolor2";
 
 export default{
   components: {ColorPicker},
@@ -189,6 +276,8 @@ export default{
 
 		viewType: String,
 
+		viewIndex: Number,
+
 		viewTypes: Array,
 
 	},
@@ -226,14 +315,32 @@ export default{
       return this.media[key][propertyKey]
     },
 
-    resetMedia(){
+    generateShade(key, value){
+      this.mediaOf('', 'html, .html')[`${key}`] = value
+      this.mediaOf('', 'html, .html')[`${key}-500`] = value
+
+      const lightenLevels = [[50, 52], [100, 37], [200, 26], [300, 12], [400, 6]];
+      const darkenLevels = [[600, 6], [700, 12], [800, 18], [900, 24]];
+
+      for(let [ idx, lvl ] of lightenLevels){
+        this.mediaOf(this.viewType, 'html, .html')[`${key}-${idx}`] =
+            tinycolor(`rgb(${value})`).lighten(lvl).toRgbString().substring(4).slice(0, -1)
+      }
 
-      this.item.props.media = {}
-      for(let i in this.viewTypes){
-        const key = this.viewTypes[i].value
-        this.item.props.media[key] = { '*': {}, 'html, .html': {}, 'h1, h2, h3, h4, h5':{} }
+      for(let [ idx, lvl ] of darkenLevels){
+        this.mediaOf(this.viewType, 'html, .html')[`${key}-${idx}`] =
+            tinycolor(`rgb(${value})`).darken(lvl).toRgbString().substring(4).slice(0, -1)
       }
+    },
 
+    resetMedia(){
+      this.confirm('Reset styles?', () => {
+        this.item.props.media = {}
+        for(let i in this.viewTypes){
+          const key = this.viewTypes[i].value
+          this.item.props.media[key] = { '*': {}, 'html, .html': {}, 'h1, h2, h3, h4, h5':{} }
+        }
+      })
     },
 
     setSplash(base64, file){
@@ -293,10 +400,14 @@ export default{
           ['Montserrat', 'Montserrat, sans-serif'],
           ['Noto Sans', '"Noto Sans", sans-serif'],
           ['Oswald', 'Oswald, sans-serif'],
+          ['Oxygen', 'Oxygen, sans-serif'],
           ['Poppins', 'Poppins, sans-serif'],
+          ['Quantico', 'Quantico, sans-serif'],
           ['Raleway', 'Raleway, sans-serif'],
+          ['Reddit Sans', '"Reddit Sans", sans-serif'],
           ['Roboto', '"Roboto", sans-serif'],
           ['Roboto Slab', '"Roboto Slab", serif'],
+          ['Volkhov', 'Volkhov, serif'],
           ['Work Sans', '"Work Sans", serif'],
         ],