@turnipxenon/pineapple 5.0.0-alpha.16 → 5.0.0-alpha.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -28,7 +28,7 @@
28
28
  inputValue: function() {
29
29
  return props.data.find((o) => o.value === value)?.label ?? "---";
30
30
  },
31
- onValueChange: onValueChangeBase ?? onValueChangeBaseImpl
31
+ onValueChange: onValueChangeBase ?? onValueChangeBaseImpl,
32
32
  });
33
33
 
34
34
  const filtered = $derived.by(() => {
@@ -46,11 +46,11 @@ Melt-based Combobox
46
46
  When migrating from Skeleton to Melt, change the value is no longer an array T[] but it's now T | undefined
47
47
  -->
48
48
 
49
- <div class={`pinya-combobox-wrapper ${props.class}`}>
49
+ <div class={`pinya-combobox-wrapper ${props.class}`} {...props}>
50
50
  <label {...combobox.label}>{props.label}</label>
51
51
  <div class="pinya-combobox-control">
52
- <input {...combobox.input} />
53
- <button class="size-[3rem]" {...combobox.trigger}>
52
+ <input {...combobox.input} disabled={props.disabled} />
53
+ <button class="size-[3rem]" {...combobox.trigger} disabled={props.disabled}>
54
54
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.5" class="size-[2rem] m-auto">
55
55
  <path d="m6 9 6 6 6-6"></path>
56
56
  </svg>
@@ -3,6 +3,7 @@
3
3
  <script module lang="ts">
4
4
  import GithubIcon from "../../../assets/icons/github-mark.svg";
5
5
  import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
6
+ import LinkIcon from "../../../assets/icons/link-icon.svg";
6
7
  import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
7
8
  import { default as FourPartCard } from "../../components/FourPartCard.svelte";
8
9
  import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
@@ -62,6 +63,14 @@
62
63
  onclick={() => window.open("https://github.com/TurnipXenon/pineapple")}>
63
64
  <ImageIcon src={GithubIcon} class="long-btn-image" alt="github icon" />
64
65
  </PinyaButton>
66
+ <PinyaButton
67
+ data-nosnippet
68
+ buttonVariant={ButtonVariant.SmallIcon}
69
+ title="https://pineapple.turnipxenon.com/documentation"
70
+ onclick={() => window.open("https://pineapple.turnipxenon.com/documentation")}>
71
+ <ImageIcon src={LinkIcon} aria-hidden />
72
+ <span>pineapple.turnipxenon.com</span>
73
+ </PinyaButton>
65
74
  </section>
66
75
  </FourPartCard>
67
76
  {/snippet}
@@ -1 +1 @@
1
- {"version":3,"file":"ThisWebpage.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/ThisWebpage.svelte.ts"],"names":[],"mappings":"AAKC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CA4ChG,CAAC;AAE7B,QAAA,MAAM,GAAG,iBAAiB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAS3B,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ThisWebpage.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/ThisWebpage.svelte.ts"],"names":[],"mappings":"AAMC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAgDhG,CAAC;AAE7B,QAAA,MAAM,GAAG,iBAAiB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAS3B,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
@@ -13,11 +13,11 @@ TODO: delete GeneralSettingsModal.svelte
13
13
  import PineappleSwitch from "../../elements/PineappleSwitch.svelte";
14
14
 
15
15
  import LanguagePicker from "../modals/general-settings/LanguagePicker.svelte";
16
+ import { appState } from "../../templates/index";
16
17
  import {
17
18
  getEnableDialogPreferenceContext,
18
19
  getEnablePortraitContext
19
20
  } from "../../../util/context/pineappleBaseContextDefinitions.svelte";
20
- import type { LocalStore } from "../../../util/localStore.svelte";
21
21
  import { setMode, userPrefersMode } from "mode-watcher";
22
22
 
23
23
  interface ToggleItem {
@@ -94,26 +94,30 @@ TODO: delete GeneralSettingsModal.svelte
94
94
  </div>
95
95
  </fieldset>
96
96
 
97
- <LanguagePicker />
98
-
99
- <div class="switch-default">
100
- <PineappleSwitch
101
- name="conversation-preference"
102
- bind:checked={enableDialogPreference.value}>
103
- </PineappleSwitch>
104
- <label for="conversation-preference">
105
- Conversation preference: {enableDialogPreference.value ? "Always on" : "Always off"}
106
- </label>
107
- </div>
108
- <div class="switch-default">
109
- <PineappleSwitch
110
- name="portrait-preference"
111
- bind:checked={enablePortraitContext.value}>
112
- </PineappleSwitch>
113
- <label for="portrait-preference">
114
- Show conversation portrait: {enablePortraitContext.value ? "Always on" : "Always off"}
115
- </label>
116
- </div>
97
+ {#if appState.isLanguagePickerAvailable}
98
+ <LanguagePicker />
99
+ {/if}
100
+
101
+ {#if appState.allowDialog}
102
+ <div class="switch-default">
103
+ <PineappleSwitch
104
+ name="conversation-preference"
105
+ bind:checked={enableDialogPreference.value}>
106
+ </PineappleSwitch>
107
+ <label for="conversation-preference">
108
+ Conversation preference: {enableDialogPreference.value ? "Always on" : "Always off"}
109
+ </label>
110
+ </div>
111
+ <div class="switch-default">
112
+ <PineappleSwitch
113
+ name="portrait-preference"
114
+ bind:checked={enablePortraitContext.value}>
115
+ </PineappleSwitch>
116
+ <label for="portrait-preference">
117
+ Show conversation portrait: {enablePortraitContext.value ? "Always on" : "Always off"}
118
+ </label>
119
+ </div>
120
+ {/if}
117
121
  </div>
118
122
 
119
123
  <style>
@@ -150,7 +154,7 @@ TODO: delete GeneralSettingsModal.svelte
150
154
 
151
155
  #field-flex {
152
156
  display: flex;
153
- flex-wrap: wrap;
157
+ flex-wrap: wrap;
154
158
  gap: 1rem;
155
159
  padding: 0.25lh 1rem;
156
160
  }
@@ -171,8 +175,8 @@ TODO: delete GeneralSettingsModal.svelte
171
175
  }
172
176
 
173
177
  .switch-default {
174
- display: flex;
175
- justify-items: center;
176
- gap: 1em;
178
+ display: flex;
179
+ justify-items: center;
180
+ gap: 1em;
177
181
  }
178
182
  </style>
@@ -1 +1 @@
1
- {"version":3,"file":"SettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/SettingsPanel.svelte.ts"],"names":[],"mappings":"AAqHA;;;;GAIG;AACH,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"SettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/SettingsPanel.svelte.ts"],"names":[],"mappings":"AAyHA;;;;GAIG;AACH,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
@@ -50,6 +50,7 @@ See panels:
50
50
 
51
51
  dialogManager.currentReadableState.subscribe((value) => {
52
52
  isHidden = value === DialogState.Invisible;
53
+ console.log(value, DialogState.Invisible, isHidden)
53
54
  });
54
55
 
55
56
  dialogManager.update(0);
@@ -57,7 +58,7 @@ See panels:
57
58
  </script>
58
59
 
59
60
  <div class="dialog-elements"
60
- hidden={isHidden}
61
+ aria-hidden={hidePercent >= (99 * 0.4)}
61
62
  style="--hidePercentWidth: -{hidePercent}vw;
62
63
  --hidePercentHeight: {hidePercentLinear}vh;">
63
64
  <div class="dialog-portrait-container" class:is-portrait-enabled={enablePortrait.value}>
@@ -163,6 +164,10 @@ See panels:
163
164
  position: fixed;
164
165
  z-index: 10;
165
166
  }
167
+ .dialog-elements[aria-hidden=true] {
168
+ opacity: 0;
169
+ pointer-events: none;
170
+ }
166
171
 
167
172
  .dialog-elements:dir(ltr) {
168
173
  left: 0;
@@ -1 +1 @@
1
- {"version":3,"file":"UniversalOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/UniversalOverlay.svelte.ts"],"names":[],"mappings":"AAkHA;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"UniversalOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/UniversalOverlay.svelte.ts"],"names":[],"mappings":"AAmHA;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
@@ -33,7 +33,7 @@
33
33
  appBardEndStyle?: "classic" | "functional"
34
34
  } = $props();
35
35
 
36
- let enableUniversalOverlay = getEnableDialogOverlayContext();
36
+ let enableUniversalOverlay = $derived(getEnableDialogOverlayContext().value);
37
37
 
38
38
  const onSettingsClick = () => {
39
39
  modals.open(GeneralSettingsModal);
@@ -99,10 +99,12 @@
99
99
  >
100
100
  <ImageIcon src={SettingsLogo} aria-hidden="true" alt=""></ImageIcon>
101
101
  </PinyaButton>
102
+ <!-- todo: investigate why enableUniversalOverlay is false here -->
102
103
  <PinyaButton
103
104
  title="Toggle conversation"
104
105
  buttonVariant={ButtonVariant.Image}
105
- colorScheme={isMounted && enableUniversalOverlay.value ? ColorScheme.Secondary : undefined}
106
+ disabled={appState.allowDialog === false}
107
+ colorScheme={isMounted && enableUniversalOverlay && appState.allowDialog !== false ? ColorScheme.Secondary : undefined}
106
108
  onclick={()=>{dialogManager.toggleDialogOverlay();}}
107
109
  >
108
110
  <ImageIcon src={DialogIcon} aria-hidden="true" alt=""></ImageIcon>
@@ -131,28 +133,28 @@
131
133
 
132
134
 
133
135
  <style>
134
- :global {
135
- .hidden {
136
- opacity: 0;
137
- }
136
+ :global {
137
+ .hidden {
138
+ opacity: 0;
139
+ }
138
140
 
139
141
  #header-action-wrapper {
140
- max-height: 2rem;
142
+ max-height: 2rem;
141
143
  display: flex;
142
144
  flex-direction: row-reverse;
143
145
  gap: 0.5rem;
144
146
 
145
- &> * {
147
+ & > * {
146
148
  padding: 0;
147
- aspect-ratio: 1 / 1;
148
- height: 100%;
149
-
150
- &> img {
151
- padding: 0.3rem;
152
- height: 95%;
153
- aspect-ratio: 1 / 1;
154
- object-fit: contain;
155
- }
149
+ aspect-ratio: 1 / 1;
150
+ height: 100%;
151
+
152
+ & > img {
153
+ padding: 0.3rem;
154
+ height: 95%;
155
+ aspect-ratio: 1 / 1;
156
+ object-fit: contain;
157
+ }
156
158
  }
157
159
 
158
160
  .pinya-button {
@@ -160,10 +162,10 @@
160
162
  }
161
163
  }
162
164
 
163
- :root {
164
- --default-page-container-margin: 4rem 1rem 0 1rem;
165
- }
166
- }
165
+ :root {
166
+ --default-page-container-margin: 4rem 1rem 0 1rem;
167
+ }
168
+ }
167
169
 
168
170
  header {
169
171
  top: 0;
@@ -1 +1 @@
1
- {"version":3,"file":"PinyaPageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAK9C,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,GAAG,YAAY,CAAA;CAC1C,CAAC;AA8GH,QAAA,MAAM,eAAe,gEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"PinyaPageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAK9C,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,GAAG,YAAY,CAAA;CAC1C,CAAC;AA+GH,QAAA,MAAM,eAAe,gEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"pinyaPageLayoutRunes.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,UAAU,QAAQ;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,UAInB,CAAC"}
1
+ {"version":3,"file":"pinyaPageLayoutRunes.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,UAAU,QAAQ;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB,EAAE,OAAO,CAAC;IAInC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,UAInB,CAAC"}
@@ -31,9 +31,9 @@
31
31
  // https://github.com/sveltejs/kit/issues/1540#issuecomment-2029016082
32
32
  const meta: PinyaHead = ({
33
33
  rootUrl: "http://localhost:5173",
34
- title: "Welcome to my portfolio",
35
- ogTitle: "Turnip time!",
36
- ogDescription: "Welcome to Turnip's test portfolio",
34
+ title: "Pineapple",
35
+ ogTitle: "Pineapple",
36
+ ogDescription: "Pineapple is my personal UI component library",
37
37
  ogImage: [WebThumbnailImage],
38
38
  ...(page.data?.meta ?? []) // override
39
39
  });
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { enableUniversalOverlaySvelte4 } from "../..";
3
+ import { appState } from "../../ui/templates/index";
3
4
  import {
4
5
  setEnableDialogOverlayContext,
5
6
  setEnableDialogPreferenceContext,
@@ -39,6 +40,18 @@
39
40
  setIgnoreOverlayOverride(ignoreOverlaySet);
40
41
  onMount(() => {
41
42
  enableUniversalOverlaySvelte4.subscribe((value) => {
43
+ if (appState.allowDialog === false && value) {
44
+ // force disable if appState allowDialog = false
45
+ enableUniversalOverlaySvelte4.set(false);
46
+ enableDialog.value = false;
47
+ return;
48
+ }
49
+
50
+ if (appState.enableDialogOnByDefault === false) {
51
+ enableDialog.value = false;
52
+ return;
53
+ }
54
+
42
55
  if (ignoreOverlaySet.value) {
43
56
  ignoreOverlaySet.value = false;
44
57
  // force initial value?
@@ -1 +1 @@
1
- {"version":3,"file":"PineappleBaseContext.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/util/context/PineappleBaseContext.svelte.ts"],"names":[],"mappings":"AAmEA,QAAA,MAAM,oBAAoB;cAjD8B,GAAG;UAiDO,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
1
+ {"version":3,"file":"PineappleBaseContext.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/util/context/PineappleBaseContext.svelte.ts"],"names":[],"mappings":"AAiFA,QAAA,MAAM,oBAAoB;cA7D8B,GAAG;UA6DO,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@turnipxenon/pineapple",
3
3
  "description": "personal package for base styling for other personal projects",
4
- "version": "5.0.0-alpha.16",
4
+ "version": "5.0.0-alpha.19",
5
5
  "devDependencies": {
6
6
  "@commitlint/cli": "^19.8.1",
7
7
  "@commitlint/config-conventional": "^19.8.1",