Merge branch 'staging' of https://github.com/smeup/ketchup into staging

README.md

@@ -54,7 +54,8 @@ Ketchup repository is a monorepo multi-package repository managed with [Lerna](h
 
 ## Showcase
 
-Go to [Ketchup Showcase](http://smeup.github.io/ketchup) to see our components live.<p align="right">(<a href="#top">back to top</a>)</p>
+
+Go to [Ketchup Showcase](https://smeup.github.io/ketchup/) to see our components live.<p align="right">(<a href="#top">back to top</a>)</p>
 
 ## Getting started
 

packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue

@@ -80,7 +80,8 @@ function createComp() {
     flat: true,
   };
   comp.id = 'demo-component';
-  comp.src = 'https://smeup.github.io/ketchup';
+  comp.src = 'https://smeup.github.io/ketchup/';
+
   return comp;
 }
 </script>

packages/ketchup-showcase/src/views/framework/kup-theme/KupTheme.vue

@@ -4,39 +4,39 @@
       <template v-slot:0>
         <kup-theme-basic></kup-theme-basic>
       </template>
-      <template v-slot:1>
+      <!-- <template v-slot:1>
         <kup-theme-features></kup-theme-features>
-      </template>
+      </template> -->
       <template v-slot:2>
         <kup-theme-events></kup-theme-events>
       </template>
-      <template v-slot:3>
+      <!-- <template v-slot:3>
         <kup-theme-maker></kup-theme-maker>
-      </template>
+      </template> -->
     </comp>
   </div>
 </template>
 
 <script>
 import KupThemeBasic from '@/views/framework/kup-theme/examples/KupThemeBasic';
 import KupThemeEvents from '@/views/framework/kup-theme/examples/KupThemeEvents';
-import KupThemeFeatures from '@/views/framework/kup-theme/examples/KupThemeFeatures';
-import KupThemeMaker from '@/views/framework/kup-theme/examples/KupThemeMaker';
+// import KupThemeFeatures from '@/views/framework/kup-theme/examples/KupThemeFeatures';
+// import KupThemeMaker from '@/views/framework/kup-theme/examples/KupThemeMaker';
 import Comp from '@/views/templates/Comp';
 export default {
   components: {
     KupThemeBasic,
     KupThemeEvents,
-    KupThemeFeatures,
-    KupThemeMaker,
+    // KupThemeFeatures,
+    // KupThemeMaker,
     Comp,
   },
   data() {
     return {
       giturl:
         'https://github.com/smeup/ketchup/tree/develop/packages/ketchup/src/managers/kup-theme',
       headtitle: 'KupTheme',
-      titles: ['What is it?', 'Features', 'Events', 'Theme maker'],
+      titles: ['What is it?', 'Events'],
     };
   },
   title: 'Ketchup | KupTheme',

packages/ketchup/README.md

@@ -54,7 +54,8 @@ Ketchup repository is a monorepo multi-package repository managed with [Lerna](h
 
 ## Showcase
 
-Go to [Ketchup Showcase](http://smeup.github.io/ketchup) to see our components live.<p align="right">(<a href="#top">back to top</a>)</p>
+Go to [Ketchup Showcase](https://smeup.github.io/ketchup/) to see our components live.<p align="right">(<a href="#top">back to top</a>)</p>
+
 
 ## Getting started
 

packages/ketchup/src/color-picker.html

@@ -20,6 +20,7 @@
             <kup-color-picker
                 id="colorpicker1"
                 initial-value="red"
+                read-only
             ></kup-color-picker>
             <kup-color-picker
                 id="colorpicker2"

packages/ketchup/src/components.d.ts

@@ -1153,6 +1153,11 @@ export namespace Components {
           * @default ""
          */
         "initialValue": string;
+        /**
+          * Sets the component to read only state, making it not editable, but interactable.
+          * @default false
+         */
+        "readOnly": boolean;
         /**
           * This method is used to trigger a new render of the component.
          */
@@ -6399,6 +6404,11 @@ declare namespace LocalJSX {
          */
         "initialValue"?: string;
         "onKup-colorpicker-change"?: (event: KupColorPickerCustomEvent<KupColorPickerEventPayload>) => void;
+        /**
+          * Sets the component to read only state, making it not editable, but interactable.
+          * @default false
+         */
+        "readOnly"?: boolean;
         /**
           * When true, the component's text field will be replaced by a swatch.
           * @default false

packages/ketchup/src/components/kup-color-picker/kup-color-picker.tsx

@@ -78,6 +78,11 @@ export class KupColorPicker {
      * @default ""
      */
     @Prop() initialValue: string = '';
+    /**
+     * Sets the component to read only state, making it not editable, but interactable.
+     * @default false
+     */
+    @Prop() readOnly: boolean = false;
     /**
      * When true, the component's text field will be replaced by a swatch.
      * @default false
@@ -257,6 +262,7 @@ export class KupColorPicker {
     private prepTextField(): VNode {
         let value: string = null;
         let textfieldProps: FTextFieldProps = {
+            readOnly: this.readOnly,
             ...this.data['kup-text-field'],
         };
         if (!textfieldProps.icon) {
@@ -297,7 +303,6 @@ export class KupColorPicker {
                         ? true
                         : false
                 }
-                readOnly={true}
                 value={value}
                 wrapperClass={
                     textfieldProps.icon === 'brightness-1' ? 'thumb-icon' : ''

packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss

@@ -7,10 +7,6 @@
   transition: background-color 0.2s;
   width: max-content;
 
-  &:hover {
-    background-color: rgba(var(--kup-text-color-rgb), 0.1);
-  }
-
   .mdc-text-field {
     &:not(.mdc-text-field--disabled) {
       cursor: pointer;

packages/ketchup/src/f-components/f-text-field/f-text-field.tsx

@@ -206,7 +206,6 @@ function setContent(props: FTextFieldProps): HTMLDivElement {
                         <textarea
                             class="mdc-text-field__input"
                             disabled={props.disabled}
-                            readOnly={props.readOnly}
                             maxlength={props.maxLength}
                             value={value}
                             onBlur={props.onBlur}
@@ -229,7 +228,6 @@ function setContent(props: FTextFieldProps): HTMLDivElement {
                         name={props.name}
                         class="mdc-text-field__input"
                         disabled={props.disabled}
-                        readOnly={props.readOnly}
                         placeholder={props.placeholder}
                         maxlength={props.maxLength}
                         size={props.size}